Question

我正在尝试使用flutter创建带有单选按钮的表单，但它不起作用。我在下面显示了最少的代码。

当我使用FutureBuilder提供groupValue时，除了已选择的默认值之外，我无法选择单选按钮。这可能是由于setState每次都在运行FutureBuilder而发生的。有办法解决这个问题吗？

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

const appName = 'Radio Example';

void main() => runApp(MaterialApp(
      title: appName,
      home: MyHomePage(),
    ));

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

class MyHomePageState extends State<MyHomePage> {
  Future<int> getSelected() async {
    return 1;
  }

  int selectedRadio;

  setSelectedRadio(int val) {
    setState(() {
      selectedRadio = val;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(appName)),
        body: Column(
          children: <Widget>[
            Expanded(
                child: FutureBuilder(
                    future: getSelected(),
                    builder: (context, snapshot) {
                      var newData = snapshot.data;
                      if (newData == null) {
                        return Container(
                          child: Center(
                            child: Text('Loading...'),
                          ),
                        );
                      } else {
                        selectedRadio = newData;
                        return ListView(
                          padding: EdgeInsets.all(24),
                          children: <Widget>[
                            Radio(
                              value: 0,
                              groupValue: selectedRadio,
                              onChanged: (val) {
                                //print("Radio activated");
                                setSelectedRadio(val);
                              },
                            ),
                            Radio(
                              value: 1,
                              groupValue: selectedRadio,
                              onChanged: (val) {
                                //print("Radio activated");
                                setSelectedRadio(val);
                              },
                            ),
                            RaisedButton(
                                child: Text("Save"),
                                onPressed: () {
                                  print("Selected Radio: $selectedRadio");
                                })
                          ],
                        );
                      }
                    })),
          ],
        ));
  }
}

Answer 1

虽然我没有使用FutureBuilder，但我以前曾遇到过此问题，但是当我尝试动态创建RadioButtons时发生了此问题。最后，我想到了以下几行代码：

  List<Widget> createRows() {
   List<Widget> allRows = new List();
   for (int i = 0; i < rawQuestions.length; i++) {
     allRows.add(Directionality(
       textDirection: TextDirection.rtl,
       child: RadioListTile<String>(
         title: Text(
           rawQuestions[i].toString(),
         ),
         activeColor: Colors.teal,
         groupValue: _radioValue,
         value: rawQuestions[i].toString(),
         onChanged: (value) {
           this.setState(() {
             _radioValue = value;
           });
         },
       ),
     ));
   }
   return allRows;
}

使用futurebuilder提供

1 个答案: