如何在Flutter的Row()小部件中将元素保持在两端？

Question

我在Flutter中使用以下的Row控件，它嵌套在一个Column控件中，在屏幕上它的显示效果如下所示：

我希望这些行元素能够以一定的填充量出现在两侧，应该怎么做呢？

 Row(
                  children: [
                    SizedBox(width:20,),

                    Text("Mark ALL READ"),

                    SizedBox(width:200,),
                    Text("Clear All"),

                  ],
                ),

- user14185798

Answer 1

将行的mainAxisAlignment属性设置为MainAxisAlignment.spaceAround应该会将元素放置在行的两端。

要添加一些填充，只需将整个Row()小部件放入Padding()小部件即可。

- matkv

Answer 2

好的，这个你可以用下面的代码来实现。你需要将Row包裹在Padding中，并在Row上使用mainAxisAlignment。

 Padding(
    padding: EdgeInsets.all(8),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        SizedBox(
          width: 20,
        ),
        Text("Mark ALL READ"),
        SizedBox(
          width: 200,
        ),
        Text("Clear All"),
      ],
    ),
   ),

- Hemant