用弹奏在listView内实现无线电按钮

Question

我有3个列表，每个列表中有多个数字/图块。我希望能够单击它们，但每个列表一次只能单击一个。 （换句话说，我想实现无线电按钮）。我已经尝试在listView itembuilder中添加radiolisttile（而不是container），但尚未成功。任何帮助将不胜感激！

这是我的代码：

import 'package:flutter/material.dart';
import 'dart:math';
import 'package:flutter/gestures.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // const MyHomePage({Key? key}) : super(key: key);
  final List<String> one = [
    '1',
    '2',
  ];
  final List<String> two = ['1', '2', '3'];
  final List<String> three = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '10',
    '11',
    '12',
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.black,
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          child: Row(
            children: <Widget>[
              Expanded(
                child: ListView.separated(
                  itemCount: one.length,
                  controller: ScrollController(),
                  separatorBuilder: (_, __) => const SizedBox(height: 10),
                  itemBuilder: ((context, index) => Container(
                        height: 50,
                        color: Colors.white,
                        child: Text('${one[index]}'),
                      )),
                ),
              ),
              const SizedBox(width: 10),
              Expanded(
                child: ListView.separated(
                  controller: ScrollController(),
                  itemCount: two.length,
                  separatorBuilder: (_, __) => const SizedBox(height: 10),
                  itemBuilder: ((context, index) => Container(
                        height: 50,
                        color: Colors.white,
                        child: Text('${two[index]}'),
                      )),
                ),
              ),
              const SizedBox(width: 10),
              Expanded(
                child: ListView.separated(
                  controller: ScrollController(),
                  itemCount: three.length,
                  separatorBuilder: (_, __) => const SizedBox(height: 10),
                  itemBuilder: ((context, index) => Container(
                        height: 50,
                        color: Colors.white,
                        child: Text('${three[index]}'),
                      )),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您有正确的想法是使用radiolisttile。您必须设置一个可以保存值的变量，在下面的代码示例中，它是_ONEVALUE，_twovalue和_threevalue - 这就是其中的位置选定的值将存储。然后，列表直到将其值设置为此，在我的示例中，它设置为空开始，然后单击单击单击按钮，它将更改该值并更新状态（以便将选择回到UI ）。

class _MyHomePageState extends State<MyHomePage> {
    // const MyHomePage({Key? key}) : super(key: key);
    final List<String> one = [
      '1',
      '2',
    ];
    final List<String> two = ['1', '2', '3'];
    final List<String> three = [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
      '12',
    ];

    var _oneValue = '';

    var _twoValue = '';

    var _threeValue = '';

    @override
    Widget build(BuildContext context) {
      return SafeArea(
        child: Scaffold(
          backgroundColor: Colors.black,
          body: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: ListView.separated(
                    itemCount: one.length,
                    controller: ScrollController(),
                    separatorBuilder: (_, __) => const SizedBox(height: 10),
                    itemBuilder: (context, index) => Container(
                      height: 50,
                      color: Colors.white,
                      child: RadioListTile(title: Text(one[index]),
                        value: one[index],
                        groupValue: _oneValue,
                        onChanged: (value) {
                          setState(() {
                            _oneValue = value.toString();
                          });
                        },
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                Expanded(
                  child: ListView.separated(
                    controller: ScrollController(),
                    itemCount: two.length,
                    separatorBuilder: (_, __) => const SizedBox(height: 10),
                    itemBuilder: (context, index) => Container(
                      height: 50,
                      color: Colors.white,
                      child: RadioListTile(title: Text(two[index]),
                        value: two[index],
                        groupValue: _twoValue,
                        onChanged: (value) {
                          setState(() {
                            _twoValue = value.toString();
                          });
                        },
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                Expanded(
                  child: ListView.separated(
                    controller: ScrollController(),
                    itemCount: three.length,
                    separatorBuilder: (_, __) => const SizedBox(height: 10),
                    itemBuilder: (context, index) => Container(
                      height: 50,
                      color: Colors.white,
                      child: RadioListTile(title: Text(three[index]),
                        value: three[index],
                        groupValue: _threeValue,
                        onChanged: (value) {
                          setState(() {
                            _threeValue = value.toString();
                          });
                        },
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
  }