Flutter分段控制插件flutter_easy_segment的使用

Flutter分段控制插件flutter_easy_segment的使用

flutter_easy_segment 是一个用于实现分段控件的 Flutter 插件。它提供了多种分段样式，包括页面视图结合分段控件、自定义分段控件、前景指示器样式以及遮罩分段控件等。通过该插件，开发者可以轻松实现复杂的分段交互效果。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 flutter_easy_segment 插件。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_easy_segment/flutter_easy_segment.dart'; // 引入插件

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这是应用的根组件
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Easy Segment Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          elevation: 0,
          foregroundColor: Colors.black,
          backgroundColor: Colors.white,
          centerTitle: true,
          titleTextStyle: TextStyle(
            fontSize: 16,
            color: Colors.black,
          ),
          toolbarHeight: 44,
          systemOverlayStyle: SystemUiOverlayStyle.dark,
        ),
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  // 定义分段项
  final List<String> _segmentItems = ['分段1', '分段2', '分段3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Easy Segment Demo'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // 使用 EasySegment 实现分段控件
            EasySegment(
              items: _segmentItems,
              selectedIndex: _selectedIndex,
              onSegmentSelected: (index) {
                setState(() {
                  _selectedIndex = index;
                });
              },
              indicatorWidth: 20, // 指示器宽度
              indicatorHeight: 3, // 指示器高度
              indicatorColor: Colors.blue, // 指示器颜色
              textStyle: const TextStyle(fontSize: 16), // 文字样式
            ),
            const SizedBox(height: 20),
            Text('当前选中的分段: ${_segmentItems[_selectedIndex]}'), // 显示当前选中的分段
          ],
        ),
      ),
    );
  }
}

示例效果

以下是运行上述代码后的效果：

1. 分段控件：用户可以通过点击不同的分段来切换内容。
2. 指示器样式：分段控件底部有一个蓝色的指示器，显示当前选中的分段。
3. 动态更新：当选中的分段发生变化时，界面上会实时显示当前选中的分段名称。

进一步扩展

flutter_easy_segment 插件还支持更多高级功能，例如自定义分段样式、背景遮罩效果等。以下是部分示例代码：

// 自定义分段控件
EasySegment.custom(
  items: _segmentItems,
  selectedIndex: _selectedIndex,
  onSegmentSelected: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  builder: (context, index, isSelected) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      decoration: BoxDecoration(
        color: isSelected ? Colors.blue : Colors.grey[200],
        borderRadius: BorderRadius.circular(20),
      ),
      child: Text(
        _segmentItems[index],
        style: TextStyle(
          color: isSelected ? Colors.white : Colors.black,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  },
);