flutter - Flutter：如何对齐多个 ButtonBar，使单选按钮在另一个下方？

Question

在这里你可以看到我目前拥有的：（我目前不允许插入这张图片）。我在 ListView 中有两个带有两个单选按钮的 TabBar，但它看起来很糟糕。无论字符串的长度如何，我都想将单选按钮放在另一个下方。

这是我的代码：

 return ListView(
      children: <Widget>[
        //..
        ),
        Container(
            child: ButtonBar(
          alignment: MainAxisAlignment.spaceBetween, // I also tried every other setting here, but none works for me
          children: <Widget>[
            Radio(
              value: 1,
              groupValue: _selectedRadio,
              activeColor: corpColorPrimary,
              onChanged: (val) => setSelectedRadio(val),
            ),
            Text("a long String"),
            Radio(
              value: 2,
              groupValue: _selectedRadio,
              activeColor: corpColorPrimary,
              onChanged: (val) => setSelectedRadio(val),
            ),
            Text("Another long String"),
          ],
        )),

        Container(
          child: ButtonBar(
            alignment: MainAxisAlignment.start,
            children: <Widget>[
              Radio(
                value: 1,
                groupValue: _selectedRadio,
                activeColor: corpColorPrimary,
                onChanged: (val) => setSelectedRadio(val),
              ),
              Text("Hi"),
              Radio(
                value: 2,
                groupValue: _selectedRadio,
                activeColor: corpColorPrimary,
                onChanged: (val) => setSelectedRadio(val),
              ),
              Text(":)"),
            ],
          ),
        ),
        RaisedButton(
          child: Text("Next"),
          onPressed: () {},
        ),

如何正确对齐单选按钮？

Answer 1

取 Row 和 in Row 取两列可以解决您的问题。

Answer 2

您可以Spacer(),在每个小部件之间使用小Container(),部件并调整它们。