Question

我是 flutter 的新手。我想对齐单选按钮。即，无论文本是什么，单选按钮都应该是 Align Column wise。我正在使用 Column 小部件，然后在其中使用 Row 小部件，但得到以下结果。

代码在这里

 Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Row(
                children: [
                  Radio(value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Radio button 1')
                ],
              ),
              Row(
                children: [
                  Radio(value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Radio 2')
                ],
              ),
              Row(
                children: [
                  Radio(value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Test')
                ],
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Row(
                children: [
                  Radio(value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('RB 1')
                ],
              ),
              Row(
                children: [
                  Radio(value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Btn Radio 2')
                ],
              ),
              Row(
                children: [
                  Radio(value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Rad 3')
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }

Answer 1

您可以使用以下几行，希望对您有所帮助

Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(
                    child: Text('Radio button 1'),
                  )
                ],
              ),
              flex: 1,
            ),
            Expanded(
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(child: Text('Radio 2'))
                ],
              ),
              flex: 1,
            ),
            Expanded(
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(child: Text('Test'))
                ],
              ),
              flex: 1,
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(child: Text('RB 1'))
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(child: Text('Btn Radio 2'))
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(
                    child: Text('Rad 3'),
                  )
                ],
              ),
            ),
          ],
        ),
      ],
    ),

Answer 2

您可以根据屏幕比较我使用的小部件。您可以使用 Flexible 或 Expanded

来实现它们

 Container(
     child: Column(
      children: [
        Row(
          children: [
            Flexible(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Expanded(
                      child: Text(
                    'Radio button 1',
                    maxLines: 2,
                  ))
                ],
              ),
            ),
            Flexible(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Radio 2')
                ],
              ),
            ),
            Flexible(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Test')
                ],
              ),
            ),
          ],
        ),
        Row(
          children: [
            Flexible(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('RB 1')
                ],
              ),
            ),
            Flexible(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Btn Radio 2')
                ],
              ),
            ),
            Flexible(
              flex: 1,
              child: Row(
                children: [
                  Radio(
                      value: 1, groupValue: 'null', onChanged: (index) {}),
                  Text('Rad 3')
                ],
              ),
            ),
          ],
        ),
      ],
    ),
  )

颤动中的单选按钮对齐

2 个答案: