Flutter：将一行切成“一半”

Question

我一直在玩弄颤动的列表，一切都很好。我开始明白整个事情的逻辑了。

现在我想做一个这样的简单布局：

我的问题是我找不到制作第一行的方法。我试图告诉 Row 让它的两个孩子拿一半，不要再少了，但我真的没有找到办法。 （里面的东西最终将是按钮。）我尝试了几件事无济于事。这是我开始的布局：

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Column(children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: 50.0),
        ),
        Row(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(
                  top: buttonPaddingTop,
                  left: buttonPaddingSide,
                  right: buttonPaddingSide),
              child: ButtonTheme(
                child: FlatButton(
                  onPressed: () {},
                  color: Colors.grey,
                  child: const Text('LARGE TEXT',
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(fontSize: buttonFontSize)),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                  top: buttonPaddingTop,
                  left: buttonPaddingSide,
                  right: buttonPaddingSide),
              child: ButtonTheme(
                child: FlatButton(
                  onPressed: () {},
                  color: Colors.grey,
                  child: const Text('LARGE TEXT',
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(fontSize: buttonFontSize)),
                ),
              ),
            ),
          ],
        ),
      ]),
    ),
  );
}

我应该继续这样尝试，还是应该尝试除 Row 之外的其他对象来安排布局？

Answer 1

Expanded 在这种情况下水平占用尽可能多的空间。这意味着如果您在 Row 中使用 2 个 Expanded 小部件，空间将被分成两半。

试试这个：

Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          Expanded(
            child: Text('first half'),
          ),
          Expanded(
            child: Text('second half'),
          ),
        ],
      ),
      Row(
        children: <Widget>[
          Expanded(
            child: Text('first half'),
          ),
          Expanded(
            child: Text('second half'),
          ),
        ],
      ),
      Row(
        children: <Widget>[
          Expanded(
            child: Text('full width'),
          )
        ],
      ),
    ],
  )

确保您阅读了有关 Flutter 小部件的更多信息，例如观看此视频（以及本系列中的其他视频）： https://www.youtube.com/watch?v=_rnZaagadyo