有没有办法将小部件对齐到 Flutter 中一行的最右边？

Question

我在 Flutter 中有一行有两个小部件。我试图让第一个小部件位于屏幕中间，第二个小部件被迫位于屏幕的最右侧。

我试过使用 Spacer()。这会导致应用返回空白屏幕。

我也尝试过使用 Expanded。这会将第二个小部件完全发送出屏幕。

尝试 mainAxisAlignment：MainAxisAlignment.spaceBetween 似乎没有任何效果。

@override
  Widget build(BuildContext context) {
    return new Container(
      height: MediaQuery.of(context).size.height,
      child: SingleChildScrollView(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Container(
              child: new GestureDetector(
                onTap: () {
                  FocusScope.of(context).requestFocus(new FocusNode());
                },
                child: Column(
                  children: <Widget>[
                    SizedBox(height: 40.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Column(
                          children: <Widget>[
                            new Container(
                              child: Row(
                                mainAxisAlignment:MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Container(),
                                  Container(
                                    child: Text(
                                      'Profile',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontFamily: 'Lato',
                                        color: Colors.white,
                                        fontSize: 50.0,
                                        fontWeight: FontWeight.w700,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child: IconButton(
                                      icon: Icon(
                                        Icons.settings,
                                        color: Colors.white,
                                        size: 30.0,
                                      ),
                                      onPressed: () {
                                        Navigator.push(
                                          context,
                                          MaterialPageRoute(
                                            builder: (context) => OnBoarding()),
                                        );
                                      }),
                                  ),
                                ]),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),

Answer 1

使用具有以下结构的行：

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Container(),
      Container(
        child: Text(
      'Profile',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontFamily: 'Lato',
        color: Colors.white,
        fontSize: 50.0,
        fontWeight: FontWeight.w700,
        ),
      ),
    ),
    Container(
    child:  IconButton(
      icon: Icon(
        Icons.settings,
        color: Colors.white,
        size: 30.0,
        ),
      ),
    ),  
  ]
),

会发生的是 spaceBetween 属性将在行中的小部件之间平均分配可用 space，所以我放了一个空的 Container，这个将强制 Text 小部件位于行的中间，而 IconButton 位于远端，如您所愿。

我在你的代码片段中注意到你有一个 Column 和一个 Row ，它又包含一个 Column ，你应该消除这种冗余来优化你的代码并使更容易调试：

Answer 2

您是否尝试过将行的 mainAxisAlignment 设置为 mainAxisAlignment.center？

Answer 3

您可以将 Row 与包含 Stack 的 Expanded 子项一起使用。使用 Center 将您的文本居中并使用 Positioned 定位图标，如下所示：

[...]
child: Column(
  children: <Widget>[
    SizedBox(height: 40.0),
    Row(
      children: <Widget>[
        Expanded(
          child: Stack(
            children: [
              Center(
                child: Text(...),
                ),
              ),
              Positioned(
                right: 8,
                child: IconButton(...),
[...]

Answer 4

我这样做并在我的项目中工作

child:Row(
 **crossAxisAlignment: CrossAxisAlignment.center,
 mainAxisAlignment: MainAxisAlignment.end,**
 children: [
  Icon(MaterialCommunityIcons.comment_outline),
  Text("0"),
  Icon(Icons.favorite_border),
  Text("0"),
  ],
),

我需要在行小部件的右侧对齐图标和文本

Container(
  child: Row(
   crossAxisAlignment: CrossAxisAlignment.center,
   mainAxisAlignment: MainAxisAlignment.end
   children: [ // put your widget list and be happy ]
  )
)

enter image description here

Answer 5

Imo 最简单的方法是创建一个包含 2 children 的行：第一个 child 是包含所有“主要”小部件的扩展行。第二个 child 是您的小部件，必须对齐到末尾。

Row(
  children: [
    Expanded(
      child: Row(
        children: [...mainWidgets...],
      ),
    ),
   ...endWidget...
  ],
),

请注意，Expanded 是 space-greedy。如果你使用例如MainAxisAlignment.center 为您的扩展行，然后您的 children 将绘制在整个可用宽度上。如果这不符合您的喜好，我建议将 Expanded-Row（未扩展）包装在一个容器内，并带有“constraints: BoxConstraints(maxWidth: 500)”。显然 Expanded 不应该被 Constrained。

Answer 6

只需在您的正文和最右边的图标之间添加 Spacer()。

例如：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {},
    ),
    Text(
      'Random test text',
      style: TextStyle(color: Colors.white),
    ),
    Spacer(),
    IconButton(
      icon: Icon(Icons.more_vert_rounded),
      color: Colors.white,
      onPressed: () {},
    ),
  ],
)

希望对您有所帮助。我希望代码的格式是可读的。仍然了解 Whosebug 评论

有没有办法将小部件对齐到 Flutter 中一行的最右边？

Is there a way to align a widget to the far right of a row in Flutter?

flutter

flutter-layout