Flutter滑动分段选择器插件reactive_sliding_segmented的使用

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

Flutter滑动分段选择器插件reactive_sliding_segmented的使用

reactive_sliding_segmented 是一个基于 CupertinoSlidingSegmentedControl 的封装,用于与 reactive_forms 配合使用的 Flutter 插件。该插件可以让你轻松地在表单中添加滑动分段选择器。

示例代码

下面是一个完整的示例 Demo,展示了如何使用 reactive_sliding_segmented 插件:

import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_sliding_segmented/reactive_sliding_segmented.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 构建表单组
  FormGroup buildForm() => fb.group({
        'input': FormControl<String>(value: null), // 初始化为空值
      });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Reactive Sliding Segmented Example')),
        body: SafeArea(
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0),
            child: ReactiveFormBuilder(
              form: buildForm, // 使用构建好的表单组
              builder: (context, form, child) {
                return Column(
                  children: [
                    // 添加滑动分段选择器
                    ReactiveSlidingSegmentedControl<String, String>(
                      formControlName: 'input', // 绑定到表单控件
                      decoration: const InputDecoration(
                        labelText: 'Rating',
                        border: OutlineInputBorder(),
                        helperText: '',
                      ),
                      padding: const EdgeInsets.all(0),
                      children: const {
                        'a': Text('A'), // 分段选项 A
                        'b': Text('B'), // 分段选项 B
                        'c': Text('C'), // 分段选项 C
                      },
                    ),
                    const SizedBox(height: 16),
                    // 提交按钮
                    ElevatedButton(
                      child: const Text('Sign Up'),
                      onPressed: () {
                        if (form.valid) {
                          // 如果表单有效,打印表单值
                          print(form.value);
                        } else {
                          // 如果表单无效,标记所有控件为已触碰状态
                          form.markAllAsTouched();
                        }
                      },
                    ),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用reactive_sliding_segmented插件的示例代码。这个插件允许你创建一个可以滑动的分段选择器,非常适合用于在应用中实现选项卡切换等功能。

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

dependencies:
  flutter:
    sdk: flutter
  reactive_sliding_segmented: ^最新版本号 # 请替换为实际最新版本号

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

接下来,在你的Dart文件中,你可以按照以下示例来使用ReactiveSlidingSegmentedControllerReactiveSlidingSegmented组件:

import 'package:flutter/material.dart';
import 'package:reactive_sliding_segmented/reactive_sliding_segmented.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

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

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

class MyHomePage extends HookWidget {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3'];

  @override
  Widget build(BuildContext context) {
    final controller = useReactiveSlidingSegmentedController<int>(
      initialIndex: 0,
      values: List.generate(items.length, (index) => index),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('Reactive Sliding Segmented Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            ReactiveSlidingSegmented<int>(
              controller: controller,
              values: controller.values,
              builder: (context, index, isActive) {
                return Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  child: Text(
                    items[index],
                    style: TextStyle(
                      color: isActive ? Colors.white : Colors.grey,
                      fontSize: isActive ? 18 : 14,
                      fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
                    ),
                  ),
                );
              },
              itemCount: items.length,
              itemPosition: ItemPosition.bottom,
              axis: Axis.horizontal,
              animationDuration: const Duration(milliseconds: 300),
              activeColor: Colors.blue,
              inactiveColor: Colors.grey[300]!,
              inactiveBorderColor: Colors.transparent,
              activeBorderColor: Colors.transparent,
              borderRadius: BorderRadius.circular(16),
              onIndexChanged: (index) {
                print('Selected index: $index');
              },
            ),
            SizedBox(height: 24),
            Expanded(
              child: Center(
                child: Text(
                  'You selected: ${items[controller.value]}',
                  style: TextStyle(fontSize: 24),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明:

  1. 依赖安装:首先,在pubspec.yaml中添加reactive_sliding_segmented依赖。

  2. 主应用MyApp是一个简单的Flutter应用,它有一个主页面MyHomePage

  3. 使用useReactiveSlidingSegmentedController:在MyHomePage中,我们使用useReactiveSlidingSegmentedController来创建一个分段控制器,它管理分段选择器的状态。initialIndex设置初始选中的分段,values是与分段对应的值列表。

  4. ReactiveSlidingSegmented组件:我们创建一个ReactiveSlidingSegmented组件,并传入控制器、值列表、以及一个构建器函数来定义每个分段的外观。onIndexChanged回调用于处理分段变化事件。

  5. 显示选中项:在分段选择器下方,我们显示当前选中的分段项。

这个示例展示了如何使用reactive_sliding_segmented插件来创建一个基本的滑动分段选择器,并处理用户的选择事件。你可以根据需要进一步自定义分段的外观和行为。

回到顶部