在单个 body 属性中创建两组独立的单选按钮的方法

问题描述 投票：0回答：1

我的目标是在我的应用程序的单个页面中拥有两组不同的单选按钮。我写了下面的代码，现在是错误的，需要帮助。

我在互联网上搜索了不同的来源，这些来源使用字符串值作为单选按钮的 groupValue 的值，这对他们有用，但对我不起作用。 现在，也许（假设之前有所不同）它发生了变化并且仅允许整数值。

我想要什么：

我正在寻找是否可以使用 

enum
值或 
String
值（
int
值的最后优先级列表）作为 
value
按钮的 
groupValue
和 
Radio
属性的值，以便我的代码可以更有组织性且易于操作。我目前对 
value
属性使用硬编码值，因此，如果我想向页面添加一组新的单选按钮，我将必须使用与前一组单选按钮中使用的数字不同的数字。我正在努力克服这个问题。

在下面的代码中，我还尝试使用 

int
列表变量作为 
value
按钮的 
Radio
属性的值，但失败了，导致错误。

如何在代码中得到上述期望？请帮忙。谢谢你。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

List<int> radioSet01 = [
  1,
  2,
];

class _MyHomePageState extends State<MyHomePage> {
  int currentRadioSet01Option = radioSet01[0];
  int _groupRadioSet01Value = 1;
  int _groupRadioSet02Value = 3;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const Column(
        children: [
          Center(
            child: Text("First Set of Radio Buttons"),
          ),
          Row(
            children: [
              Radio(
                value: 1,
                groupValue: _groupRadioSet01Value,
                onChanged: (value) {
                  setState(() {
                    _groupRadioSet01Value = value!;
                  });
                },
              ),
              Text("First option of Set 1"),
            ],
          ),
          Row(
            children: [
              Radio(
                value: 2,
                groupValue: _groupRadioSet01Value,
                onChanged: (value) {
                  setState(() {
                    _groupRadioSet01Value = value!;
                  });
                },
              ),
              Text("Second option of Set 1"),
            ],
          ),
          Center(
            child: Text("Second Set of Radio Buttons"),
          ),
          Row(
            children: [
              Radio(
                value: 3,
                groupValue: _groupRadioSet02Value,
                onChanged: (value) {
                  setState(() {
                    _groupRadioSet02Value = value!;
                  });
                },
              ),
              Text("First option of Set 2"),
            ],
          ),
          Row(
            children: [
              Radio(
                value: 4,
                groupValue: _groupRadioSet02Value,
                onChanged: (value) {
                  setState(() {
                    _groupRadioSet02Value = value!;
                  });
                },
              ),
              Text("Second option of Set 2"),
            ],
          ),
        ],
      ),
    );
  }
}
flutter radio-button radiobuttonlist
1个回答
0
投票
    import 'package:flutter/material.dart';

// Define enums for the radio button groups
enum RadioGroup1 { option1, option2 }
enum RadioGroup2 { option1, option2 }

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RadioButtonExample(),
    );
  }
}

class RadioButtonExample extends StatefulWidget {
  @override
  _RadioButtonExampleState createState() => _RadioButtonExampleState();
}

class _RadioButtonExampleState extends State<RadioButtonExample> {
  // State variables for the selected values
  RadioGroup1 _selectedGroup1 = RadioGroup1.option1;
  RadioGroup2 _selectedGroup2 = RadioGroup2.option1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Radio Button Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text('Group 1', style: TextStyle(fontSize: 20)),
            RadioListTile<RadioGroup1>(
              title: Text('Option 1'),
              value: RadioGroup1.option1,
              groupValue: _selectedGroup1,
              onChanged: (RadioGroup1? value) {
                setState(() {
                  _selectedGroup1 = value!;
                });
              },
            ),
            RadioListTile<RadioGroup1>(
              title: Text('Option 2'),
              value: RadioGroup1.option2,
              groupValue: _selectedGroup1,
              onChanged: (RadioGroup1? value) {
                setState(() {
                  _selectedGroup1 = value!;
                });
              },
            ),
            Divider(),
            Text('Group 2', style: TextStyle(fontSize: 20)),
            RadioListTile<RadioGroup2>(
              title: Text('Option 1'),
              value: RadioGroup2.option1,
              groupValue: _selectedGroup2,
              onChanged: (RadioGroup2? value) {
                setState(() {
                  _selectedGroup2 = value!;
                });
              },
            ),
            RadioListTile<RadioGroup2>(
              title: Text('Option 2'),
              value: RadioGroup2.option2,
              groupValue: _selectedGroup2,
              onChanged: (RadioGroup2? value) {
                setState(() {
                  _selectedGroup2 = value!;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

说明： 单选按钮组的枚举：

定义了两个枚举 RadioGroup1 和 RadioGroup2 来表示每组单选按钮的选项。 状态变量：

_selectedGroup1 和 _selectedGroup2 是保存每个组当前选定值的状态变量。这些变量是上面定义的枚举类型。 RadioListTile 小部件：

RadioListTile 小部件用于创建单选按钮。 value 和 groupValue 属性使用枚举，使代码更具可读性和可管理性。 当选择单选按钮时， onChanged 回调会更新相应的状态变量。 这种方法确保您可以轻松管理多组单选按钮，而无需对整数值进行硬编码，从而使代码更有条理且更易于维护。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.