Flutter分段控制器插件segmented_control_plus的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter分段控制器插件segmented_control_plus的使用

分段控制

一个适用于所有平台的简洁分段控制器小部件。

特性

  • 选择模式 [可选]

使用

以下是如何使用分段控制器小部件的一个简单示例:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('分段控制器示例')),
        body: Center(
          child: SegmentedControl<int>(
            segments: [
              SegmentIcon(
                icon: Icons.public,
                value: 0,
                tooltip: "公开",
              ),
              SegmentIcon(
                icon: Icons.lock,
                value: 1,
                tooltip: "私有",
              ),
            ],
            onTap: (val) => print("选择的值: $val"),
          ),
        ),
      ),
    );
  }
}

你也可以使用 SegmentIconBuilder

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('分段控制器示例')),
        body: Center(
          child: SegmentedControl<int>(
            segments: [
              SegmentIconBuilder(
                iconBuilder: (context, color) {
                  return Icon(
                    Icons.public,
                    size: 22,
                    color: color,
                  );
                },
                value: 0,
                tooltip: "公开",
              ),
              SegmentIconBuilder(
                iconBuilder: (context, color) {
                  return Icon(
                    Icons.lock,
                    size: 22,
                    color: color,
                  );
                },
                value: 1,
                tooltip: "私有",
              ),
            ],
            onTap: (val) => print("选择的值: $val"),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter分段控制器插件segmented_control_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter分段控制器插件segmented_control_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter中使用segmented_control_plus插件的示例代码。segmented_control_plus是一个用于创建分段控制器的Flutter插件,它允许用户在不同的选项之间进行选择。

首先,确保你已经在pubspec.yaml文件中添加了segmented_control_plus依赖:

dependencies:
  flutter:
    sdk: flutter
  segmented_control_plus: ^x.y.z  # 请替换为最新版本号

然后,运行flutter pub get来安装依赖。

接下来是一个完整的示例代码,展示了如何使用segmented_control_plus插件:

import 'package:flutter/material.dart';
import 'package:segmented_control_plus/segmented_control.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Segmented Control Plus Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 50,
            ),
            SegmentedControl<int>(
              values: List.generate(3, (index) => index),
              selected: selectedIndex,
              onChanged: (newValue) {
                setState(() {
                  selectedIndex = newValue!;
                });
                // 可以在这里添加其他逻辑,比如导航到不同的页面
                print('Selected index: $selectedIndex');
              },
              color: Colors.blue,
              selectedColor: Colors.indigo,
              borderColor: Colors.grey,
              borderSelectedColor: Colors.blueAccent,
              unselectedLabelStyle: TextStyle(color: Colors.grey),
              selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
              children: List.generate(3, (index) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('Option $index'),
                );
              }),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个包含分段控制器的简单Flutter应用。SegmentedControl组件的values属性是一个包含选项值的列表,这里我们简单地使用了0到2的整数。selected属性表示当前选中的索引,而onChanged回调会在用户更改选择时被调用。

此外,我们还自定义了一些样式属性,如colorselectedColorborderColorborderSelectedColorunselectedLabelStyleselectedLabelStyle,以便更好地控制分段控制器的外观。

当用户选择不同的选项时,selectedIndex会更新,并且会在控制台打印出当前选中的索引。你可以根据需要添加更多的逻辑来处理用户的选择。

回到顶部