Flutter:在 "half"中切割一行

Question

我一直在 flutter 中摆弄列表，一切都很好。我开始理解整件事的逻辑。

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

我的问题是我找不到制作第一行的方法。我试图告诉 Row 让它的两个 child 分一半，不多不少，但我真的没有找到办法。 (里面的东西最终会变成按钮。)我尝试了几种方法都无济于事。这是我开始的布局:

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