Flutter分段选择器插件ksegment_view的使用

简介

ksegment_view 是一个用于创建分段选择器的 Flutter 插件。它允许用户通过滑动或点击来切换不同的选项，并且支持多种自定义样式。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加 ksegment_view 依赖：

dependencies:
  ksegment_view: ^版本号

然后运行以下命令以更新依赖：

flutter pub get

2. 创建分段选择器

以下是一个完整的示例代码，展示如何使用 ksegment_view 插件创建一个简单的分段选择器。

import 'package:flutter/material.dart';
import 'package:ksegment_view/segment/segment_flip_card.dart';
import 'package:ksegment_view/segment/segment_pos.dart';
import 'package:ksegment_view/segment/segment_view.dart';

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

class MyApp extends StatelessWidget {
  // 应用程序入口
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Center(
          child: KSegmentView(
            // 定义分段选择器的选项
            ['Left', 'Right'],
            // 定义每个选项的渲染逻辑
            (_, isLeft, angle) {
              return SegmentFlipCard(
                isLeft ? 'Left' : 'Right', // 显示的文本
                pos: isLeft ? SegmentPos.left : SegmentPos.right, // 当前位置
                angle: angle, // 动画角度
                borderRadius: 50, // 圆角半径
                cardBgColor: Colors.blueGrey, // 背景颜色
                titleStyle: TextStyle(
                  fontSize: 25,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ), // 文本样式
              );
            },
            // 分段选择器的边界大小
            boundary: Size(200, 80),
            // 选项切换时的回调函数
            onChanged: (pos) {
              print('+ changed to : $pos');
            },
            // 背景色
            backgroundColor: Colors.blue.shade300,
            // 边框颜色
            borderColor: Colors.blueGrey,
            // 圆角半径
            borderRadius: 50,
            // 边框厚度
            borderThick: 5,
            // 初始选中的选项
            initialSelected: SegmentPos.left,
            // 文本样式
            titleStyle: TextStyle(fontSize: 25, color: Colors.white),
          ),
        ),
      ),
    );
  }
}