如何在 ListView.builder 中使用 RadioListTile？

Posted 2023-02-23

【中文标题】如何在 ListView.builder 中使用 RadioListTile？

【英文标题】：How to use RadioListTile inside of a ListView.builder?

【发布时间】：2019-06-15 09:21:46

【问题描述】：

我正在尝试制作一个可选择的列表视图。

我选择了RadioListTile ，但它不需要与Radios 一起使用，我会很高兴在点击该项目时ListTile 的背景颜色发生变化。 所以在我当前的代码中，我有RadioListTiles，但它不检查水龙头，我认为它可以检查多个，因为它在ListView.builder，但我不知道，因为我新来的颤振，它不工作。

代码如下：

ListView.builder(
  scrollDirection: Axis.vertical,
  itemCount: items.length,
  itemBuilder: (context, index) 
    return RadioListTile<LoadList>(
      selected: isSelected,
      groupValue: radiolist,
      value: items[index],
      onChanged: (LoadList value) 
        radiolist.GetHours(value.hours);
        print("CurrentSelected $index");
        setState(() 
          isSelected = true;
        );
      ,
      title: new Text(index),
    );
  ,
),

【问题讨论】：

什么是 loadlist , radiolist, items 请告诉我。我也想做，但做不到

【参考方案1】：

Radio 在 Flutter 中其实非常简单。基本上，它们是一个项目列表，每个项目都有一个值，并且有一个共享的选定值。状态维护共享的选定值。

基本上，您需要做的就是跟踪所选值并在按下列表项时更改它。对于每个项目，您检查共享的选定值是否等于项目的值。

RadioListItem 只是通过为您做相等部分来帮助一点点。这应该可以满足您的需求。

import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatefulWidget 
  @override
  MyAppState createState() 
    return new MyAppState();
  


class MyAppState extends State<MyApp> 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        body: RadioListBuilder(
          num: 20,
        ),
      ),
    );
  


class RadioListBuilder extends StatefulWidget 
  final int num;

  const RadioListBuilder(Key key, this.num) : super(key: key);

  @override
  RadioListBuilderState createState() 
    return RadioListBuilderState();
  


class RadioListBuilderState extends State<RadioListBuilder> 
  int value;

  @override
  Widget build(BuildContext context) 
    return ListView.builder(
      itemBuilder: (context, index) 
        return RadioListTile(
          value: index,
          groupValue: value,
          onChanged: (ind) => setState(() => value = ind),
          title: Text("Number $index"),
        );
      ,
      itemCount: widget.num,
    );
  

【讨论】：

感谢您的回答！这与我的代码非常相似，但是我尝试了它，如果我在onChanged 中打印它的打印，带有正确的索引，但Radio 没有检查，与我的代码相同......我怎么能点击时更改Radio 的颜色？

检查你的代码中是否有这个“groupValue: value”

嗨@rmtmckenzie，如果你能解决我的问题***.com/questions/68208975/…

【参考方案2】：

检查下面的代码示例以动态使用单选按钮。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: _options
      .map((e) => new Column(
            children: [
              Container(
                margin: EdgeInsets.symmetric(vertical: 5),
                decoration: BoxDecoration(
                  border: Border.all(
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(12.0),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: e.subOptions
                      .map((x) => RadioListTile(
                            value: x.optionBit, //set this to parent object of the 
                                                //group which determines the selected option.
                            groupValue: e.optionBit,
                            onChanged: (value) 
                              setState(() 
                                e.optionBit = value;
                              );
                            ,
                            title: new Text(
                              x.text,
                            ),
                          ))
                      .toList(),
                ),
              )
            ],
          ))
      .toList(),
),