从单选框到复选框，探索Cupertino组件的更多可能

2023-09-21 21:29:49

前言

在Flutter中，Cupertino组件库提供了许多风格化的组件，这些组件遵循iOS设计指南，可以帮助我们轻松构建出具有iOS风格的应用程序。在上一篇文章中，我们介绍了Cupertino风格的单选框，在本篇文章中，我们将继续介绍Cupertino风格的复选框。

Cupertino复选框

Cupertino复选框是一个勾选控件，它允许用户在两个状态之间切换：选中和未选中。复选框通常用于让用户选择多个选项。

Cupertino复选框的API与Cupertino单选框非常相似，它也具有value、onChanged和activeColor属性。此外，Cupertino复选框还具有一个tristate属性，该属性可以设置为true或false。当tristate属性设置为true时，复选框可以处于三个状态：选中、未选中和中间状态。中间状态表示用户尚未做出选择。

Cupertino复选框的使用场景

Cupertino复选框可以用于各种场景，例如：

让用户选择多个选项。
让用户在两种状态之间切换。
让用户在三种状态之间切换。

实现Cupertino复选框

我们首先创建一个新的Flutter项目，然后在pubspec.yaml文件中添加对Cupertino组件库的依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

接下来，我们在lib/main.dart文件中创建一个新的类，并继承自StatelessWidget：

import 'package:flutter/material.dart';
import 'package:cupertino_icons/cupertino_icons.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Cupertino复选框'),
        ),
        child: Center(
          child: CupertinoCheckbox(
            value: false,
            onChanged: (value) {
              print(value);
            },
            activeColor: CupertinoColors.activeBlue,
          ),
        ),
      ),
    );
  }
}