Flutter环形按钮组插件ring_button_group的使用

环形按钮组简介

本插件提供了一个可配置的组件，用于在固定大小的圆环上显示一组按钮。

环形按钮组演示

特性

环形按钮组功能演示

开始使用

添加依赖

在终端运行以下命令以添加依赖：

flutter pub add ring_button_group

或者手动将以下内容添加到你的pubspec.yaml文件中：

dependencies:
  ring_button_group: ^1.0.0

现在你可以在Dart代码中导入该包了：

import 'package:ring_button_group/ring_button_group.dart';

使用方法

以下是一个简单的示例代码，展示如何使用RingButtonGroup组件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Ring Button Group'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({required this.title});

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

class _MyHomePageState extends State<MyHomePage> {
  late String displayName = "Test";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
              child: SizedBox(
                width: 200,
                height: 200,
                child: RingButtonGroup(
                  buttonNumber: 5,
                  icons: const [
                    Icon(Icons.abc, color: Colors.white),
                    Icon(Icons.baby_changing_station, color: Colors.white),
                    Icon(Icons.cabin, color: Colors.white),
                    Icon(Icons.dangerous, color: Colors.white),
                    Icon(Icons.e_mobiledata, color: Colors.white),
                  ],
                  type: RingButtonGroupType.MULTIPLE_SELECTABLE,
                  pressedIndex: const {1},
                  shadowEffect: true,
                  onPressed: (index, selected) async => true,
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
              child: SizedBox(
                width: 200,
                height: 200,
                child: RingButtonGroup(
                  disabled: true,
                  buttonNumber: 6,
                  buttonSize: 60,
                  labels: const [
                    Text("I"),
                    Text("II"),
                    Text("III"),
                    Text("IV"),
                    Text("V"),
                    Text("VI"),
                  ],
                  type: RingButtonGroupType.SINGLE_SELECTABLE,
                  pressedIndex: const {1},
                  onPressed: (index, selected) async => true,
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
              child: SizedBox(
                width: 220,
                height: 220,
                child: RingButtonGroup(
                  buttonNumber: 6,
                  buttonSize: 50,
                  toneColor: Colors.deepOrange,
                  borderColor: Colors.orange,
                  activeColor: Colors.deepOrange.shade200,
                  tintColor: Colors.deepOrange.shade400,
                  labels: const [
                    Text("1", style: TextStyle(color: Colors.white)),
                    Text("2", style: TextStyle(color: Colors.white)),
                    Text("3", style: TextStyle(color: Colors.white)),
                    Text("4", style: TextStyle(color: Colors.white)),
                    Text("5", style: TextStyle(color: Colors.white)),
                    Text("6", style: TextStyle(color: Colors.white)),
                  ],
                  type: RingButtonGroupType.SINGLE_SELECTABLE,
                  onPressed: (index, selected) async {
                    setState(() {
                      displayName = "Test $index";
                    });
                    return true;
                  },
                  child: Center(
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.orange),
                        borderRadius: BorderRadius.circular(40),
                        boxShadow: const [BoxShadow(blurStyle: BlurStyle.outer, color: Colors.black12, blurRadius: 5)],
                      ),
                      width: 80,
                      height: 80,
                      child: Center(child: Text(displayName)),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

`RingButtonGroup`属性

属性名	类型	默认值	注释
buttonNumber	int	-	按钮总数，必须大于1
pressedIndex	Set<int>	`{}`	默认选中的按钮索引列表，从0开始
onPressed	OnPressedFunction?	`null`	异步回调函数，参数为当前选中的索引和所有选中的索引集合
disabled	bool	`false`	是否禁用按钮
buttonSize	double	`40`	按钮的大小，即按钮所在圆的半径
toneColor	Color	`Colors.blueAccent`	主按钮颜色
tintColor	Color	`Colors.blueGrey`	按钮按下时的颜色
activeColor	Color	`Colors.lightBlueAccent`	按钮激活后的颜色
borderColor	Color	`Colors.lightBlueAccent`	按钮边框颜色
disableColor	Color	`Colors.blueAccent`	禁用时的主颜色，与toneColor相同时自动变为灰度
disableBorderColor	Color	`Colors.lightBlueAccent`	禁用时的边框颜色，与borderColor相同时自动变为灰度
icons	List<Widget>?	`null`	按钮图标列表，当设置时，列表长度必须与buttonNumber相同
labels	List<Widget>?	`null`	按钮标签列表，仅在icons为null时有效，列表长度必须与buttonNumber相同
child	Widget?	`null`	环形按钮的子组件，通常用于在中心放置一个圆形以显示目的
shadowEffect	bool	`false`	按下/选中时是否启用内部阴影效果
splitStrokeSize	double	`0.5`	分割线的宽度，注意这不是圆的边框

`RingButtonGroupType`类型

类型	描述
PRESS_ONLY	仅允许点击操作，但不会保持按下/选中状态
SINGLE_SELECTABLE	仅允许一个按钮处于按下/选中状态，类似于单选框
MULTIPLE_SELECTABLE	允许多个按钮同时按下/选中，类似于复选框

示例

完整的示例代码可以在example/lib/main.dart文件中找到。你可以通过以下命令运行示例：

flutter run

更多关于Flutter环形按钮组插件ring_button_group的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

zlyuanteng 1楼

更多关于Flutter环形按钮组插件ring_button_group的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用ring_button_group插件的示例代码。这个插件允许你创建一个环形的按钮组，用户可以选择其中的一个按钮。

首先，你需要在你的pubspec.yaml文件中添加ring_button_group依赖：

dependencies:
  flutter:
    sdk: flutter
  ring_button_group: ^最新版本号  # 请替换为实际的最新版本号

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

接下来是一个完整的示例代码，展示如何使用ring_button_group插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ring Button Group Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RingButtonGroupDemo(),
    );
  }
}

class RingButtonGroupDemo extends StatefulWidget {
  @override
  _RingButtonGroupDemoState createState() => _RingButtonGroupDemoState();
}

class _RingButtonGroupDemoState extends State<RingButtonGroupDemo> {
  int selectedIndex = 0;

  final List<String> buttonLabels = ['A', 'B', 'C', 'D'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ring Button Group Demo'),
      ),
      body: Center(
        child: RingButtonGroup(
          selectedIndex: selectedIndex,
          onSelectedChanged: (index) {
            setState(() {
              selectedIndex = index;
            });
          },
          buttons: List.generate(
            buttonLabels.length,
            (index) => RingButton(
              label: buttonLabels[index],
              color: index == selectedIndex ? Colors.blue : Colors.grey,
              textColor: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

代码解释：

导入依赖：
- import 'package:flutter/material.dart';
- import 'package:ring_button_group/ring_button_group.dart';
主应用：
- MyApp 类是一个简单的StatelessWidget，它设置了应用的主题并定义了主页为RingButtonGroupDemo。
主页：
- RingButtonGroupDemo 是一个StatefulWidget，它持有一个状态类_RingButtonGroupDemoState。
- _RingButtonGroupDemoState 持有当前选中的按钮索引selectedIndex和一个按钮标签列表buttonLabels。
构建UI：
- 使用Scaffold和AppBar创建一个简单的布局。
- 使用Center将RingButtonGroup居中对齐。
- RingButtonGroup接受以下参数：
  - selectedIndex：当前选中的按钮索引。
  - onSelectedChanged：当选中项改变时的回调。
  - buttons：一个RingButton列表，每个RingButton有一个标签、颜色和文本颜色。颜色根据是否选中而变化。

运行这个代码，你会看到一个包含四个选项的环形按钮组。当你点击其中一个按钮时，该按钮的颜色会变为蓝色，表示它被选中，同时其他按钮变为灰色。

请确保你使用的ring_button_group版本是最新的，并且阅读其官方文档以获取更多功能和配置选项。

Flutter环形按钮组插件ring_button_group的使用

Flutter环形按钮组插件ring_button_group的使用

环形按钮组简介

特性

开始使用

添加依赖

使用方法

RingButtonGroup属性

RingButtonGroupType类型

示例

代码解释：

`RingButtonGroup`属性

`RingButtonGroupType`类型