Flutter分段控件插件material_segmented_control的使用

Material Segmented Control

一个类似于iOS风格的Material设计分段控件。

为什么需要这个插件？

我们都很熟悉Flutter中的Cupertino风格的分段控件。但是在Material设计中没有类似的组件，所以作者创建了这个插件来弥补这一空缺。

你可以通过pub.dev查看和下载这个插件。

如何使用

引入插件

在你的pubspec.yaml文件中添加如下依赖：

dependencies: 
    material_segmented_control: ^5.0.1

然后在代码中导入：

import 'package:material_segmented_control/material_segmented_control.dart';

基本用法

下面是一个简单的示例，展示了如何创建并使用MaterialSegmentedControl：

int _currentSelection = 0;

MaterialSegmentedControl(
    children: _children,
    selectionIndex: _currentSelection,
    borderColor: Colors.grey,
    selectedColor: Colors.redAccent,
    unselectedColor: Colors.white,
    selectedTextStyle: TextStyle(color: Colors.white),
    unselectedTextStyle: TextStyle(color: Colors.redAccent),
    borderWidth: 0.7,
    borderRadius: 32.0,
    disabledChildren: [3],
    onSegmentTapped: (index) {
      setState(() {
        _currentSelection = index;
      });
    },
);

Map<int, Widget> _children = {
  0: Text('Hummingbird'),
  1: Text('Kiwi'),
  2: Text('Rio'),
  3: Text('Telluraves')
};

功能特性

• 取消所有选项的选择：将selectionIndex设置为null可以取消所有选项的选择。
• 禁用某些选项：通过设置disabledChildren属性来指定哪些索引对应的选项是不可点击的。可以通过传递null或空列表来不使用此功能。

完整示例demo

以下是一个更完整的示例，包含了按钮用于切换禁用状态和取消选择的功能：

import 'dart:math';

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int? _currentSelection = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              MaterialSegmentedControl(
                children: _children,
                selectionIndex: _currentSelection,
                borderColor: Colors.grey,
                selectedColor: Colors.redAccent,
                unselectedColor: Colors.white,
                selectedTextStyle: TextStyle(color: Colors.white),
                unselectedTextStyle: TextStyle(color: Colors.redAccent),
                borderWidth: 0.7,
                borderRadius: 6.0,
                disabledChildren: _disabledIndices,
                verticalOffset: 8.0,
                onSegmentTapped: (index) {
                  setState(() {
                    _currentSelection = index;
                  });
                },
              ),
              SizedBox(
                height: 8,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    child: Text('Toggle disabled'),
                    onPressed: () {
                      // This is just an example on how disabled children work.
                      // A disabled index is determined randomly.
                      setState(() {
                        _disabledIndices.clear();
                        _disabledIndices.add(_randomInt());
                      });
                    },
                  ),
                  const SizedBox(width: 8),
                  ElevatedButton(
                    child: Text('Un-select all'),
                    onPressed: () => setState(() => _currentSelection = null),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Map<int, Widget> _children = {
    0: Text('Flutter'),
    1: Text('Dart'),
    2: Text('Desktop'),
    3: Text('Mobile'),
    4: Text('Web')
  };

  // Holds all indices of children to be disabled.
  // Set this list either null or empty to have no children disabled.
  List<int> _disabledIndices = [];

  int _randomInt() {
    return Random.secure().nextInt(_children.length);
  }
}

以上就是关于material_segmented_control插件的基本介绍和使用方法。希望对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。