Question

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

我选择了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),
                                        );
                                    }
                                    ),

Answer 1

收音机实际上非常简单。基本上，它们是一个项目列表，每个项目都有一个值，并且有一个共享的选定值。状态保持共享的选定值。

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

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,
    );
  }
}

Answer 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(),
),

如何在ListView.builder中使用RadioListTile？

2 个答案: