首页 > 解决方案 > RadioListTile 未正确选择

问题描述

我是 Vaibhav Pathak。我在使用 RadioListTile 时遇到问题。我在 onChnaged 属性上创建了两个 RadioListTile 来调用一个函数,在该函数中调用 setState 将 selectedRadio 变量的值设置为我从函数中获得的值,它更改了变量值但不反映对 Ui 的更改意味着它确实不选择按下的单选按钮。

我的代码在这里:

showPaymentOptions() {
showModalBottomSheet(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(25.0),
            topRight: Radius.circular(25.0))),
    elevation: 8.0,
    context: context,
    builder: (context) {
      return Padding(
        padding: const EdgeInsets.all(15.0),
        child: Container(
            height: 240,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.topLeft,
                      child: Text(
                        "Select Payment Method : ",
                        style: TextStyle(
                            color: Colors.black54,
                            fontSize: 16.0,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                    SizedBox(
                      height: 7.0,
                    ),
                    Card(
                      elevation: 8.0,
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Column(
                          children: <Widget>[
                            RadioListTile(
                                activeColor: myTheme.primaryColor,
                                title: Text("COD"),
                                value: 1,
                                groupValue: selectedPaymentMethod,
                                onChanged: (value) =>
                                    _changePayment(value)),
                            SizedBox(
                              height: 5.0,
                            ),
                            RadioListTile(
                                activeColor: myTheme.primaryColor,
                                title: Text("Paytm"),
                                value: 2,
                                groupValue: selectedPaymentMethod,
                                onChanged: (value) =>
                                    _changePayment(value)),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Stack(
                    alignment: Alignment.bottomCenter,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(
                            "Pay ₹499",
                            style: TextStyle(
                                fontSize: 16.0,
                                fontWeight: FontWeight.bold),
                          ),
                          isOrderSuccessful
                              ? RaisedButton(
                                  onPressed: () =>
                                      placeOrder(selectedPaymentMethod),
                                  color: myTheme.primaryColor,
                                  textColor: Colors.white,
                                  child: Text(
                                    "Place Order",
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 16.0),
                                  ))
                              : CircularProgressIndicator(
                                  valueColor: AlwaysStoppedAnimation<Color>(
                                      myTheme.primaryColor))
                        ],
                      ),
                    ],
                  ),
                )
              ],
            )),
      );
    });

}

setState 函数代码:

  _changePayment(int value) {
print(value);
print(selectedPaymentMethod);
setState(() {
  selectedPaymentMethod = value;
});

}

标签: flutter

解决方案


朋友我自己做的。我使用了StatefulBuilder小部件并将列子项包裹在Column我放入两个子项的内部,ReadioListTile并在 onChanged 属性中放入了_setState我从构建器获得StatefulBuilder的值并将支付方式变量的值设置为其值,然后它以我的方式正常工作想要它。

答案代码:

StatefulBuilder(
                          builder: (context, _setState) {
                            return Column(
                              children: <Widget>[
                                RadioListTile(
                                    activeColor: myTheme.primaryColor,
                                    title: Text("Cash on Delivery"),
                                    value: 1,
                                    groupValue: selectedPaymentMethod,
                                    onChanged: (value) => _setState(() {
                                          selectedPaymentMethod = value;
                                        })),
                                RadioListTile(
                                    activeColor: myTheme.primaryColor,
                                    title: Text("Paytm"),
                                    value: 2,
                                    groupValue: selectedPaymentMethod,
                                    onChanged: (value) => _setState(() {
                                          selectedPaymentMethod = value;
                                        })),
                              ],
                            );
                          },
                        ),

推荐阅读