循环中的 RadioListTile Flutter

Posted 2023-02-23

【中文标题】循环中的 RadioListTile Flutter

【英文标题】：RadioListTile Flutter in loop

【发布时间】：2021-03-08 13:32:08

【问题描述】：

RadioListTile 有问题，它不起作用

我正在尝试创建 RadioListTile 列表，以使用 for 循环填充来自 firebase 的数据。当我点击它时，它会收到动作，但点击它时我无法选中该框。

我已经尝试解决它好几天了。有人可以帮忙吗？

这是我的代码：

import 'package:eatwell/src/helpers/changescreen.dart';
import 'package:eatwell/src/model/itemmodel.dart';
import 'package:eatwell/src/model/platemodel.dart';
import 'package:eatwell/src/pages/cartPage.dart';
import 'package:eatwell/src/provider/customplate.dart';
import 'package:eatwell/src/provider/item.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class CustomDetail extends StatefulWidget 
  final CustomModel custom;

  const CustomDetail(Key key, this.custom) : super(key: key);

  @override
  _CustomDetail createState() => _CustomDetail();


class _CustomDetail extends State<CustomDetail> 
  @override
  Widget build(BuildContext context) 
    final carbsProvider = Provider.of<CarbsProvider>(context);
    var mycarb = 1;
    return Scaffold(
        appBar: AppBar(
          title: Text(
            "Preset Meal",
            style: TextStyle(
              fontSize: 30.0,
              fontWeight: FontWeight.bold,
              color: Colors.black,
              fontFamily: 'DancingScript',
            ),
          ),
          centerTitle: true,
          actions: <Widget>[
            Padding(
              padding: const EdgeInsets.only(bottom: 8.0, right: 8.0),
              child: Stack(
                children: <Widget>[
                  IconButton(
                      icon: Icon(
                        Icons.shopping_bag_outlined,
                        size: 40,
                      ),
                      onPressed: () 
                        changeScreen(context, Cart());
                      ),
                  Positioned(
                    right: 3,
                    bottom: 0,
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10),
                          boxShadow: [
                            BoxShadow(
                                color: Colors.grey,
                                offset: Offset(2, 3),
                                blurRadius: 3)
                          ]),
                      child: Padding(
                        padding: const EdgeInsets.only(left: 4, right: 4),
                        child: Text(
                          "2",
                          style: TextStyle(
                              color: Colors.red,
                              fontSize: 16.0,
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
        body: SafeArea(
          child: ListView(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(
                    left: 20.0, right: 20, bottom: 10, top: 30),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.cyanAccent,
                    borderRadius: BorderRadius.circular(100),
                  ),
                  height: 300,
                  alignment: Alignment.center,
                  child: Image(
                    image: NetworkImage(widget.custom.image),
                    height: 300,
                    width: 300,
                  ),
                ),
              ),
              Text(
                widget.custom.name,
                style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
              Text(
                ("RM $widget.custom.price"),
                style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),

              for (var i = 0; i < widget.custom.carbnum; i++)
                Column(
                  children: <Widget>[
                    ListTile(
                      title: Text("Choose Your Carbohydrates"),
                    ),
                    for (var i = 0; i < carbsProvider.carbs.length; i++)
                      RadioListTile(
                        title: Text(carbsProvider.carbs[i].name),
                        value: i,
                        onChanged: (var v) 
                          print("object");
                          mycarb = v;
                        ,
                        groupValue: mycarb,
                      )
                  ],
                ),

              // for (var i = 0; i < widget.custom.fooditems.length; i++)
              //   Text(
              //     widget.custom.fooditems[i],
              //     style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
              //   )
            ],
          ),
        ));
  

【问题讨论】：

您的列表中是否填满了 Firestore 数据，而问题出在您单击列表时？你有任何错误日志吗？

我的 RadioTile 列表充满了来自 firestore 的数据，但我不知道如何设置 radiotilelist 的 groupvalue，因为当我点击收音机列表的 n 项数据时，它将标记为选中

我已经解决了，变量应该在构建内容之外声明，谢谢大家的帮助

【参考方案1】：

将您的 onChanged 包装在 setState 中。 就像

onChanged: (var v) 
  setState(()
    print("object");
    mycarb = v;
  );
,

【讨论】：

我已经解决了，变量应该在构建内容之外声明，谢谢大家的帮助

【参考方案2】：

根据文档：

调用 setState 会通知框架此对象的内部状态已发生更改，可能会影响此子树中的用户界面，这会导致框架为此 State 对象安排构建。

在 RadioListTile 小部件的 onChanged 方法中使用 setState 方法，并由 Abdul Qadir 回答。

【讨论】：

我已经解决了，变量应该在构建内容之外声明，谢谢大家的帮助