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这意味着如果您在 中使用 2 个小部件Row，空间将被分成两半。

尝试这个：

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