Question

我有一张卡，该卡的第一行包含2个文本项。

我想在开始时放置一个项目，然后直接在中心放置下一个项目。

我玩过MainAxisAlignment，但是似乎没有任何办法满足这种情况，例如，如果我使用MainAxisAlignment.spaceBetween，则将每个项目放置在行的末尾。

有明显的方法吗？

谢谢

Answer 1

您可以使用Spacer小部件来填充行中的可用空间：

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: SpacedRow(),
          ),
        ),
      ),
    );
  }
}

class SpacedRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(width: 50, height: 50, color: Colors.red),
        Spacer(),
        Container(width: 50, height: 50, color: Colors.yellow),
        Spacer(),
      ],
    );
  }
}

产生：

Answer 2

您可以使用Spacer()，Expandable()，Flex()，MainAxisAlignment.spaceBetween，但是在这里您可能需要提供padding。有很多方法可以实现这一目标。如果您可以共享屏幕截图或代码，我们可以相应地发布代码。

Answer 3

尽管约旦的回答达到了上述问题，但黄色方块看上去并不完全居中。我尝试了以下操作

Stack(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Image.asset(
                  "images/toolbar_logo.webp",
                  width: 80,
                  height: 50,
                ),
              ],
            ),
            IconButton(
              icon: Icon(Icons.navigation),
              onPressed: () {},
              iconSize: 20,
            ),
          ],
        ),

颤振行在开始时放置一项，在中间放置另一项

3 个答案: