如何将小部件连续居中？

Question

我想让我的 TopNavBarLogo 在左侧（行的开头）带有文本“BestFitnesstrackerEU”，我的 TopNavBarItems“Informationen”和“Neuigkeiten”在中间和行“Login”和“Teilnehmer werden”的末尾。

我的问题是，我不能将我的 TopNavBarItems 居中。 我尝试创建一个新行并使用“mainAxisAlignment：MainAxisAlignment.center”和“mainAxisSize：MainAxisSize.min”将其居中，但没有成功。

目前我正在使用“SizedBox(width: screenSize.width / 5)”来使小部件居中，但为此需要一个更准确的方法。

这是 TopNavigationBar 的样子：

如何将 TopNavBarItems“Informationen”和“Neuigkeiten”居中？

编辑：

雷尼克城屋：

mainAxisAlignment : MainAxisAlignment.center

如果您使用 min 选项，请更改为以下内容：

mainAxisSize: MainAxisSize.max

回答：即使我使用“mainAxisSize: MainAxisSize.max”，它也不会改变任何东西。

这是我删除“SizedBox(width: screenSize.width / 5)”并使用“mainAxisSize: MainAxisSize.max”时的图像：

代码：

  import 'package:bestfitnesstrackereu/widgets/top_navigation_bar/top_navigation_bar_logo.dart';
    import 'package:flutter/material.dart';
    import '../../routing/route_names.dart';
    import '../top_navbar_item/top_navbar_item.dart';
    
    
    class TopNavigationBarTabletDesktop extends StatelessWidget {
      const TopNavigationBarTabletDesktop({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        var screenSize = MediaQuery.of(context).size;
        return Container(
          height: 100,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(width: 30,),
              TopNavBarLogo(),
              SizedBox(width: 30,),
              Visibility(child: Text( "BestFitnesstrackerEU", style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.normal,))),
    
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget> [
                  SizedBox(width: screenSize.width / 5),
                  TopNavBarItem('Informationen', HomeRoute),
                  SizedBox(width: 40,),
                  TopNavBarItem('Neuigkeiten', EpisodesRoute),
                  SizedBox(width: 40,),
                ],
              ),
    
              Spacer(),
              SizedBox(width: 40,),
              TopNavBarItem('Login', AuthenticationPageRoute),
              SizedBox(width: 40,),
              TopNavBarItem('Teilehmer werden', RegristrationRoute)     
              SizedBox(width: 40,),
    
      ],
          ),
            );
      }
}

非常感谢您的帮助！

Answer 1

mainAxisAlignment : MainAxisAlignment.center,

如果您使用 min 选项，请更改为以下内容：

mainAxisSize: MainAxisSize.max

Answer 2

我已经删除了该行并改用了 spacer() 。

不知道为什么我以前没有这样做过。

Answer 3

如果您想要三个小部件在行中（左（开始）、中心和右（结束）），您可以使用mainAxisAlignment: MainAxisAlignment.spaceBetween to Row。 无需在 2 个小部件之间提供计算空间。