Flutter iOS风格单选按钮插件cupertino_radio_choice的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter iOS风格单选按钮插件 cupertino_radio_choice 的使用

CupertinoRadioChoice 是一个用于在Flutter应用中实现iOS风格的单选按钮的插件。它允许用户从一组选项中选择一个值。

教程

完整的教程可以在这里找到：Tutorial。

快速使用

只需填写 CupertinoRadioChoice 所需的参数，就可以开始使用了。例如：

CupertinoRadioChoice(
    choices: {'male': 'Male', 'female': 'Female', 'other': 'Other'},
    onChange: (selectedGender) {},
    initialKeyValue: 'male')

请参考以下示例以了解其用法：Quick-Link

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用 CupertinoRadioChoice 插件：

import 'package:cupertino_radio_choice/cupertino_radio_choice.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  static final Map<String, String> genderMap = {
    'male': 'Male',
    'female': 'Female',
    'other': 'Other',
  };

  String _selectedGender = genderMap.keys.first;

  @override
  Widget build(BuildContext context) {
    final genderSelectionTile = new Material(
      color: Colors.transparent,
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          const Text('Select Gender',
              style: TextStyle(
                color: CupertinoColors.systemBlue,
                fontSize: 15.0,
              )),
          const Padding(
            padding: EdgeInsets.only(bottom: 5.0),
          ),
          CupertinoRadioChoice(
              choices: genderMap,
              onChange: onGenderSelected,
              initialKeyValue: _selectedGender)
        ],
      ),
    );

    return new Scaffold(
      body: Padding(
          padding: const EdgeInsets.fromLTRB(20, 100, 20, 50),
          child: Column(children: <Widget>[genderSelectionTile])),
    );
  }

  void onGenderSelected(String genderKey) {
    setState(() {
      _selectedGender = genderKey;
    });
  }
}

Bugs/Requests

如果您遇到任何问题，请随时在GitHub上创建一个问题。如果您认为库缺少某个功能，请在GitHub上创建一个请求票，我会查看它。也欢迎提交拉取请求。

Example Screenshot


这个Markdown文档详细介绍了如何在Flutter应用中使用 `cupertino_radio_choice` 插件，并提供了完整的示例代码。希望这对您有所帮助！

更多关于Flutter iOS风格单选按钮插件cupertino_radio_choice的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter iOS风格单选按钮插件cupertino_radio_choice的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 cupertino_radio_choice 插件来创建 iOS 风格的单选按钮的示例代码。这个插件通常用于 Flutter 应用中，以提供符合 iOS 设计规范的单选按钮组件。

首先，确保你已经在 pubspec.yaml 文件中添加了 cupertino_radio_choice 依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_radio_choice: ^x.y.z  # 请替换为最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来是一个完整的 Flutter 应用示例，展示如何使用 cupertino_radio_choice：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cupertino Radio Choice Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cupertino Radio Choice Demo'),
        ),
        body: Center(
          child: MyRadioChoiceWidget(),
        ),
      ),
    );
  }
}

class MyRadioChoiceWidget extends StatefulWidget {
  @override
  _MyRadioChoiceWidgetState createState() => _MyRadioChoiceWidgetState();
}

class _MyRadioChoiceWidgetState extends State<MyRadioChoiceWidget> {
  String selectedValue = 'Option 1';

  @override
  Widget build(BuildContext context) {
    return CupertinoRadioChoice<String>(
      value: selectedValue,
      groupValue: selectedValue,
      onChanged: (newValue) {
        setState(() {
          selectedValue = newValue!;
        });
      },
      options: [
        CupertinoRadioChoiceOption<String>(
          value: 'Option 1',
          label: Text('Option 1'),
        ),
        CupertinoRadioChoiceOption<String>(
          value: 'Option 2',
          label: Text('Option 2'),
        ),
        CupertinoRadioChoiceOption<String>(
          value: 'Option 3',
          label: Text('Option 3'),
        ),
      ],
    );
  }
}

解释

  1. 依赖引入：在 pubspec.yaml 文件中添加 cupertino_radio_choice 依赖。
  2. 主应用：MyApp 类定义了一个基本的 Flutter 应用结构。
  3. 主页面：MyRadioChoiceWidget 是一个有状态的组件，它包含了一个 CupertinoRadioChoice 组件。
  4. 单选按钮组：CupertinoRadioChoice 组件接受以下参数：
    • value：当前选中的值（在内部用于跟踪状态）。
    • groupValue：整个单选按钮组的当前选中值。
    • onChanged：当选中值改变时的回调。
    • options：一个 CupertinoRadioChoiceOption 列表，定义了每个选项的标签和值。

运行应用

将上述代码粘贴到你的 Flutter 项目中，并运行应用。你应该会看到一个带有三个选项的单选按钮组，每个选项都是 iOS 风格的。

请确保你使用的是最新版本的 cupertino_radio_choice 插件，因为插件的 API 可能会随着版本的更新而有所变化。如果插件有更新，请查阅最新的文档以获取最新的使用方法和示例。

回到顶部