Question

我想创建两个小部件。两者均显示带有可选择/未选择按钮的2列网格。一个应该具有无线电逻辑（单选），而另一个应该具有复选框逻辑（多选）。

这是我正在尝试在Flutter中重新创建的android实现：

我尝试将GridView与RadioListTiles一起使用，以为可以在保留逻辑的同时用自己的小部件替换RadioButton图标。我看不到任何办法。我还意识到Flutter中的GridView不会自动包装其子级，导致每个无线电图块仅占据整个单元格的前10％。

这是我现在的位置：

class RadioSelect extends StatefulWidget {
    final QuestionData question;

    RadioSelect({this.question});

    @override
    RadioSelectState createState() => RadioSelectState(question);
}

class RadioSelectState extends State<RadioSelect> {
  RadioSelectState(this._question);

  final QuestionData _question;
  final SliverGridDelegate delegate = 
    SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2);
  int _selectedIndex;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: delegate,
      padding: EdgeInsets.all(0),
      itemCount: _question.selectOptions.length,
      itemBuilder: (context, index) {
        return RadioListTile(
          groupValue: _selectedIndex,
          title: Text(_question.selectOptions[index]),
          value: index,
          onChanged: (newIndex) {
           setState(() {
              _selectedIndex = newIndex;
            });
          },
        );
      },
    );
  }
}

结果：

我想遵循最“蓬松”的方式。您认为我的最佳动因是什么？

Answer 1

我也遇到了同样的问题，但是flutter似乎没有提供任何这样的小部件。尝试使用自定义广播（第三方插件）。

https://pub.dev/packages/custom_radio

Answer 2

尝试使用FilterChip和ChoiceChip小部件。 FilterChip将实现复选框逻辑（多项选择），而ChoiceChip的行为类似于单选按钮。这两个小部件都将允许您使用自定义小部件来适应您的ui。

Answer 3

我为此创建了这个包。去看看这个。 Group radio button plugin

https://github.com/Dineth95/radio_grouped_buttons

Container(
                padding: EdgeInsets.all(10),
                width: MediaQuery.of(context).size.width,
                height: 160,
                child: CustomRadioButton(
                  buttonLables: buttonList,
                  buttonValues: buttonList,
                  radioButtonValue: (value)=>print(value),
                  horizontal: true,
                  enableShape: true,
                  buttonSpace: 5,
                  buttonColor: Colors.white,
                  selectedColor: Colors.cyan,
                ),
              ),

Using this widget you can do anything you want

实现自定义小部件的单选/复选框逻辑

3 个答案: