Flutter速来系列7: Flutter的单选、复现、开关

4,380 阅读3分钟

在移动应用开发中,单选和复选是常见的用户交互模式,用于选择一个或多个选项。Flutter提供了一些内置的组件和机制,方便我们实现单选和复选功能。本文将介绍Flutter中的单选按钮(RadioButton)和复选框(Checkbox)的使用方法和示例。

单选

单选按钮(RadioButton)

单选按钮是一种用户界面组件,用于在多个选项中选择一个选项。在Flutter中,我们可以使用RadioRadioListTile来创建单选按钮。

Radio组件需要与RadioGroup一起使用,以便在一组选项中实现单选功能。以下是一个使用RadioRadioGroup的示例:

示例代码

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: RadioPage(),
  ));
}

class RadioPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Radio Page'),
      ),
      body: Center(
        child: MyRadioGroup(),
      ),
    );
  }
}

class MyRadioGroup extends StatefulWidget {
  @override
  _MyRadioGroupState createState() => _MyRadioGroupState();
}

class _MyRadioGroupState extends State<MyRadioGroup> {
  int _selectedValue = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RadioListTile(
          title: Text('Option 1'),
          value: 1,
          groupValue: _selectedValue,
          onChanged: (value) {
            setState(() {
              _selectedValue = value as int;
            });
          },
        ),
        RadioListTile(
          title: Text('Option 2'),
          value: 2,
          groupValue: _selectedValue,
          onChanged: (value) {
            setState(() {
              _selectedValue = value as int;
            });
          },
        ),
      ],
    );
  }
}

在上面的示例中,我们创建了一个名为MyRadioGroup的有状态(stateful)小部件。通过使用RadioListTile,我们为每个选项创建了一个单选按钮,并使用groupValue属性指定当前选中的值。onChanged回调函数在选择改变时被调用,通过调用setState来更新选择的值。

image.png

复选框

Flutter复选框(Checkbox)

Flutter的复选框是一种用户界面组件,用于允许用户选择多个选项,可以同时选择或取消选择多个选项。复选框通常以一个方框和一个选中状态的标记符号呈现,用户可以通过点击复选框来切换选项的选择状态。

示例代码

以下是一个完整的能够运行的Flutter复选框的示例代码:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: CheckboxPage(),
  ));
}

class CheckboxPage extends StatefulWidget {
  @override
  _CheckboxPageState createState() => _CheckboxPageState();
}

class _CheckboxPageState extends State<CheckboxPage> {
  List<bool> _selectedValues = [false, false, false];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Checkbox Example'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          CheckboxListTile(
            title: Text('Option 1'),
            value: _selectedValues[0],
            onChanged: (value) {
              setState(() {
                _selectedValues[0] = value!;
              });
            },
          ),
          CheckboxListTile(
            title: Text('Option 2'),
            value: _selectedValues[1],
            onChanged: (value) {
              setState(() {
                _selectedValues[1] = value!;
              });
            },
          ),
          CheckboxListTile(
            title: Text('Option 3'),
            value: _selectedValues[2],
            onChanged: (value) {
              setState(() {
                _selectedValues[2] = value!;
              });
            },
          ),
        ],
      ),
    );
  }
}

image.png

在上面的示例中,我们创建了一个名为CheckboxPage的有状态(stateful)小部件。该页面包含了三个复选框,用于选择不同的选项。复选框的选择状态通过_selectedValues列表进行控制,并在状态改变时使用setState进行更新。

我们使用CheckboxListTile组件创建了复选框,并在每个复选框中设置了标题和初始的选中状态。onChanged回调函数在复选框状态改变时被调用,并通过setState更新选择的状态。

运行这个示例,您将看到三个复选框在页面上显示,并且可以通过点击复选框来切换它们的选中状态。

Flutter单选开关(Switch)

Flutter的单选开关(Switch)是一种用户界面组件,用于在两个选项之间进行单选选择,表示开关的状态为打开或关闭。单选开关通常以滑动开关的形式呈现,用户可以通过滑动或点击来改变其状态。

示例代码

以下是一个完整的能够运行的Flutter单选开关的示例代码:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: SwitchPage(),
  ));
}

class SwitchPage extends StatefulWidget {
  @override
  _SwitchPageState createState() => _SwitchPageState();
}

class _SwitchPageState extends State<SwitchPage> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Switch(
              value: _isSwitched,
              onChanged: (value) {
                setState(() {
                  _isSwitched = value;
                });
              },
            ),
            Text(
              _isSwitched ? 'Switch is ON' : 'Switch is OFF',
              style: TextStyle(fontSize: 18.0),
            ),
          ],
        ),
      ),
    );
  }
}

在上面的示例中,我们创建了一个名为SwitchPage的有状态(stateful)小部件。该页面包含一个Switch组件和一个文本组件,用于显示开关的状态。开关的状态通过_isSwitched变量进行控制,并在状态改变时使用setState进行更新。

Switch组件中,我们使用value属性指定当前的开关状态,onChanged回调函数在开关状态改变时被调用,并通过setState更新开关的值。

image.png