Flutter分段按钮滑动插件segmented_button_slide的使用

Segmented Button Slide

Segmented Button Slide 是一个从iOS分段按钮获得灵感并适应Material设计风格的Flutter插件。它允许用户通过滑动来选择不同的选项，提供了丰富的自定义选项，包括样式、动画等。

如何使用

安装插件

首先，在你的项目中安装此插件，可以通过以下命令：

flutter pub add segmented_button_slide

示例代码

下面是一个完整的示例代码，展示了如何在应用中使用 SegmentedButtonSlide 组件：

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

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

class SegmentedButtonDemo extends StatefulWidget {
  const SegmentedButtonDemo({super.key});

  @override
  State<SegmentedButtonDemo> createState() => _SegmentedButtonDemoState();
}

class _SegmentedButtonDemoState extends State<SegmentedButtonDemo> {
  int _selected = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Segmented Button Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Segmented Button Slide Demo')),
        body: Center(
          child: FractionallySizedBox(
            widthFactor: 0.5,
            child: SegmentedButtonSlide(
              entries: const [
                SegmentedButtonSlideEntry(
                  icon: Icons.home_rounded,
                  label: "Home",
                ),
                SegmentedButtonSlideEntry(
                  icon: Icons.list_rounded,
                  label: "List",
                ),
                SegmentedButtonSlideEntry(
                  icon: Icons.settings_rounded,
                  label: "Settings",
                ),
              ],
              selectedEntry: _selected,
              onChange: (selected) => setState(() => _selected = selected),
              colors: SegmentedButtonSlideColors(
                barColor: Theme.of(context)
                    .colorScheme
                    .primaryContainer
                    .withOpacity(0.5),
                backgroundSelectedColor:
                    Theme.of(context).colorScheme.primaryContainer,
              ),
              slideShadow: [
                BoxShadow(
                  color: Colors.blue.withOpacity(1),
                  blurRadius: 5,
                  spreadRadius: 1,
                )
              ],
              margin: const EdgeInsets.all(16),
              height: 70,
              padding: const EdgeInsets.all(16),
              borderRadius: BorderRadius.circular(8),
              selectedTextStyle: const TextStyle(
                fontWeight: FontWeight.w700,
                color: Colors.green,
              ),
              unselectedTextStyle: const TextStyle(
                fontWeight: FontWeight.w400,
                color: Colors.red,
              ),
              hoverTextStyle: const TextStyle(
                color: Colors.orange,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

参数详解

• entries：必须提供，接受一个 SegmentedButtonSlideEntry 列表。每个条目可以包含图标和标签。
• selectedEntry：必须提供，表示当前选中的项的索引。
• onChange：必须提供，当用户选择不同项时触发，并返回所选的索引。
• colors：必须提供，用于配置整体背景色和选中项的背景色。
• slideShadow：可选，为滑动条设置阴影效果。
• barShadow：可选，为整个栏设置阴影效果。
• margin：可选，设置组件外边距。
• height：可选，设置组件高度。
• fontSize：可选，设置文本字体大小（不影响图标）。
• iconSize：可选，设置图标大小（不影响文本）。
• textOverflow：可选，定义文本溢出方式。
• animationDuration：可选，默认250毫秒，定义所有动画的持续时间。
• curve：可选，默认为 ease，定义所有动画的缓动曲线。
• padding：可选，设置内部填充。
• borderRadius：可选，设置圆角半径。
• selectedTextStyle：可选，设置选中项的文本样式。
• unselectedTextStyle：可选，设置未选中项的文本样式。
• hoverTextStyle：可选，设置悬停时的文本样式。

迁移指南

从v1迁移到v2时需要注意一些破坏性更改：

• 移除了 foregroundSelectedColor, foregroundUnselectedColor 和 hoverColor 属性。
• 新增了 selectedTextStyle, unselectedTextStyle 和 hoverTextStyle 来替代上述属性的功能。

希望以上内容能帮助你更好地理解和使用 segmented_button_slide 插件！如果有任何问题或需要进一步的帮助，请随时提问。