Flutter 行将一个项目放在开始位置，将另一个项目放在中间

Question

我有一张卡片，这张卡片的第一行将有 2 个文本项。

我想把一个项目放在最开始，然后下一个项目直接放在中间。

我玩过 MainAxisAlignment 但似乎没有什么适合这种情况，例如如果我使用 MainAxisAlignment.spaceBetween 然后每个项目都放在行的末尾。

有没有明显的方法可以做到这一点？

谢谢

Answer 1

您可以使用 Spacer 小部件在行中填写可用 space：

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()、Expanded()、Flexible()、MainAxisAlignment.spaceBetween，但此处您可能需要提供padding。有很多方法可以实现这一目标。如果您可以分享屏幕截图或代码，我们可以 post 相应的代码。

Answer 3

虽然Jordan的回答达到了问题中提到的，但是黄色块看起来并不完全居中。我尝试了以下内容

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,
            ),
          ],
        ),

Flutter 行将一个项目放在开始位置，将另一个项目放在中间

Flutter row place one item at start and other item in the middle

flutter

flutter-layout