Flutter:如何在 Listview 中创建单选按钮?

问题描述 投票:0回答:1
  • 我正在尝试实现代码作为 pic 中附加的设计
  • 但是当我试图按下列表中的任何项目时(无线电 btns 未更新为新值)
  • 有人可以帮我实现它作为附加设计

 var _oneValue = '';
  var timeSlot = [
    "١٢:٠٠ منتصف الليل",
    "١:٠٠ صباحا",......


  Row(
                                                            mainAxisAlignment:
                                                                MainAxisAlignment
                                                                    .spaceBetween,
                                                            children: [
                                                              Expanded(
                                                                child: Text(
                                                                  (timeSlot[i]),
                                                                  style: Typographies
                                                                      .largeBodyStyle(),
                                                                ),
                                                              ),
                                                              Radio(
                                                                  activeColor:
                                                                      ColorManager
                                                                          .black,
                                                                  value: timeSlot[i],
                                                                  groupValue:
                                                                      _oneValue,
                                                                  onChanged:
                                                                      (value) {
                                                                    setState(
                                                                        () {
                                                                      _oneValue =
                                                                          value!;
                                                                      print(
                                                                          _oneValue);
                                                                    });
                                                                  })
                                                            ],
                                                          ),
  • 尝试在项目之间切换
flutter dart radio-button row flutter-listview
1个回答
0
投票

尝试使用 RadioListTile 小部件

这里是一个示例实现

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  List items = [{'label':'Item1', 'value':1} ,{'label':'Item2', 'value':2}] ;
  int _selectedValue=-1;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        for(var item in items)
        RadioListTile(
          title:  Text(item['label']),
          value: item['value'],
          groupValue: _selectedValue,
          onChanged: (value) {
            print('Selected value $value');
            setState(() {
              _selectedValue = value as int;
            });
          },
        ),
        
      ],
    );
  }
}

© www.soinside.com 2019 - 2024. All rights reserved.