flutter - Flutter:模态表中的单选按钮是这样的

Question

如何在Flutter的模式表内创建像这样的单选按钮组？这是显示此https://imgur.com/a/A0nYhTh的图片

先感谢您。

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

void _showModalSheet() {
showModalBottomSheet(
    context: context,
    builder: (builder) {
      return new Container(
        height: 300,
        child: new Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(top: 20.0, left: 10.0, bottom: 20.0),
                  child: Text("Please Choose", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),),
                ),
              ],
            ),
            Divider(height: 20.0, color: Colors.grey,),
            Row(
                children: <Widget>[
                  Text("Mutton Bone Curry"),
                  Spacer(),
                  new Radio(
                    onChanged: (int e) => something(e),
                    activeColor: Colors.blue,
                    value: 1,
                    groupValue: groupValue,
                  ),
                ],
              ),
            Row(
              children: <Widget>[
                Text("Vegetable Kuruma"),
                Spacer(),
                new Radio(
                  onChanged: (int e) => something(e),
                  activeColor: Colors.blue,
                  value: 2,
                  groupValue: groupValue,
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Text("Chicken Curry"),
                Spacer(),
                new Radio(
                  onChanged: (int e) => something(e),
                  activeColor: Colors.blue,
                  value: 3,
                  groupValue: groupValue,
                ),
              ],
            ),
          ],
        ),
      );
    });
  }

@override
int groupValue;
Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: new Text("Flutter BottomSheet"),
  ),
  body: new Padding(
    padding: const EdgeInsets.all(20.0),
    child: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Padding(
              padding: const EdgeInsets.only(top: 10.0),
            ),
            new RaisedButton(
              onPressed: _showModalSheet,
              child: new Icon(Icons.control_point),
            ),
          ],
        )),
  ),
);
}

void something(int e) {
setState(() {
  if (e == 1) {
    groupValue = 1;
  } else if (e == 2) {
    groupValue = 2;
  } else if (e == 3) {
    groupValue = 3;
  }
});
}}

到目前为止，我已经能够实现这一目标。唯一的问题是，一旦选中按钮，就无法立即看到更改。返回屏幕中心(control_point图标所在的位置)后，您才能看到它。

Answer 1

我遇到了与您相同的问题，并且设法在StreamBuilder中处理这种情况，因为我不想调用setState(){}来刷新整个页面。

我复制/粘贴我的解决方案，这很简单，您可以自己解决😁

final manager = Provider.of<FilterManager>(context, listen: false);
showModalBottomSheet(
    context: context,
    builder: (_) => StreamBuilder(
        stream: manager.selectedItemChanges,
        builder: (_, AsyncSnapshot<SortItem> snapshot) => ListView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemCount: manager.items.length,
            itemBuilder: (context, pos) => RadioListTile(
                controlAffinity: ListTileControlAffinity.trailing,
                title: Text(manager.items[pos].label),
                value: manager.items[pos],
                groupValue: snapshot.data,
                onChanged: (item) => manager.setFilter(item)))));

manager.setFilter()触发流 selectedItemChanges内部发出的新项目