Question

我在Flutter中有两个小部件。我试图将第一个窗口小部件居中放置在屏幕中间，将第二个窗口小部件强制放置在屏幕的最右边。

我尝试使用Spacer（）。这会导致应用返回空白屏幕。

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

尝试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

我做到了，并在我的项目中工作

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 2

您可以将Row与包含Expanded的{{1}}子级一起使用。用Stack居中放置文本，并用Center放置图标，如下所示：

Positioned

Answer 3

使用具有以下结构的行：

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属性将在行中的小部件之间平均分配可用空间，因此我放置了一个空的Container，这将迫使Text小部件执行以下操作：根据需要位于行的中间，IconButton位于远端。

我在您的代码段中注意到，您有一个Column和一个Row，其中又包含一个Column，您应该消除这种冗余以优化代码并简化代码调试：

Answer 4

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

Answer 5

Imo 最简单的方法是创建一个有 2 个孩子的行：第一个孩子是一个扩展行，其中包含所有“主要”小部件。第二个孩子是你的小部件，它必须对齐到最后。

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

请注意， Expanded 是贪空间的。如果您使用例如MainAxisAlignment.center 用于您的扩展行，然后您的孩子将在整个可用宽度上绘制。如果这不符合您的喜好，我建议将 Expanded-Row（未扩展）包裹在带有“constraints: BoxConstraints(maxWidth: 500)”的容器内。显然扩展不应该受到约束。

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: () {},
    ),
  ],
)

希望对你有帮助。我希望代码的格式是可读的。仍然掌握着 stackoverflow 的评论

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

6 个答案: