Flutter选择器轮盘插件selector_wheel的使用
Flutter选择器轮盘插件 selector_wheel 的使用
selector_wheel 是一个用于创建可定制选择器轮盘的Flutter插件。本文将详细介绍如何在Flutter项目中使用该插件，并提供完整的示例代码。
Table of Contents
Features
- 可定制的选择器轮盘小部件
- 支持可变轮盘大小、项目宽度、项目高度等
- 基于Flutter的最佳实践构建，以实现最佳性能
- 支持触觉反馈、淡出效果等
- 可与任何数据类型一起使用
Getting started
首先，在你的 pubspec.yaml 文件中添加 selector_wheel：
flutter pub add selector_wheel
然后运行 flutter pub get 来安装依赖。
Usage
Basic usage
导入包并使用 SelectorWheel 小部件：
import 'package:selector_wheel/selector_wheel.dart';
SizedBox(
width: 200,
height: 200,
child: SelectorWheel(
childCount: 10,
convertIndexToValue: (int index) {
return SelectorWheelValue(
label: index.toString(),
value: index,
index: index,
);
},
onValueChanged: (SelectorWheelValue<int> value) {
print(value);
},
),
)
Customizing the selector wheel
你可以通过 convertIndexToValue 函数将索引转换为任意值。以下是一个将索引转换为四分之一磅的例子：
SizedBox(
width: 200,
height: 200,
child: SelectorWheel(
childCount: 10,
convertIndexToValue: (int index) {
final quarter = index / 4;
return SelectorWheelValue(
label: '${quarter.toString()} lb',
value: quarter,
index: index,
);
},
onValueChanged: (SelectorWheelValue<double> value) {
print(value);
},
),
)
你还可以通过覆盖 ThemeData 来自定义颜色：
Theme(
data: ThemeData(
textTheme: Theme.of(context).textTheme.copyWith(
titleLarge: Theme.of(context).textTheme.titleLarge?.copyWith(
fontSize: 24.0,
fontWeight: FontWeight.w600,
),
),
colorScheme: Theme.of(context).colorScheme.copyWith(
surface: Colors.black,
onSurface: Colors.white,
secondaryContainer: Colors.amber,
),
),
child: SizedBox(
width: 200,
height: 200,
child: SelectorWheel(
childCount: 10,
highlightBorderRadius: 16.0,
highlightHeight: 40.0,
highlightWidth: 100.0,
convertIndexToValue: (int index) {
return SelectorWheelValue(
label: index.toString(),
value: index,
index: index,
);
},
onValueChanged: (value) {
print(value);
},
),
),
)
完整示例 Demo
下面是一个包含多个示例的完整示例代码：
import 'package:flutter/material.dart';
import 'package:selector_wheel/selector_wheel.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey[300],
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// ----------------------------------------------
// Example 1, regular selector wheel
// ----------------------------------------------
_Background(
child: SelectorWheel(
childCount: 10,
convertIndexToValue: (int index) {
return SelectorWheelValue(
label: index.toString(),
value: index,
index: index,
);
},
onValueChanged: (SelectorWheelValue<int> value) {
print(value);
},
),
),
const SizedBox(height: 32.0),
// ----------------------------------------------
// Example 2, overriding the colors of the selector wheel
// ----------------------------------------------
Theme(
data: ThemeData(
textTheme: Theme.of(context).textTheme.copyWith(
titleLarge:
Theme.of(context).textTheme.titleLarge?.copyWith(
fontSize: 24.0,
fontWeight: FontWeight.w600,
),
),
colorScheme: Theme.of(context).colorScheme.copyWith(
surface: Colors.black,
onSurface: Colors.white,
secondaryContainer: Colors.purple,
),
),
child: _Background(
child: SelectorWheel(
childCount: 10,
childHeight: 48.0,
highlightBorderRadius: BorderRadius.circular(32.0),
highlightHeight: 48.0,
highlightWidth: 120.0,
fadeOutHeightFraction: 0.33,
convertIndexToValue: (int index) {
final fraction = index / 4;
final value = '${fraction.toStringAsFixed(2)} lb';
return SelectorWheelValue(
label: value, value: fraction, index: index);
},
onValueChanged: (value) {
print(value);
},
),
),
),
const SizedBox(height: 32.0),
// ----------------------------------------------
// Example 3, customized wheel selectors displayed side by side
// ----------------------------------------------
_Background(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Theme(
data: Theme.of(context).copyWith(
colorScheme: Theme.of(context).colorScheme.copyWith(
secondaryContainer: Colors.amber,
),
),
child: SelectorWheel(
width: 60.0,
childCount: 10,
highlightBorderRadius: BorderRadius.circular(4.0),
convertIndexToValue: (int index) {
final value = index * 5;
return SelectorWheelValue(
label: value.toString(),
value: value,
index: index,
);
},
onValueChanged: (SelectorWheelValue<int> value) {
print(value);
},
),
),
const SizedBox(
width: 32.0,
child: Text(
'✕',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.0, fontWeight: FontWeight.w600),
),
),
Theme(
data: Theme.of(context).copyWith(
textTheme: Theme.of(context).textTheme.copyWith(
titleLarge: Theme.of(context)
.textTheme
.titleLarge
?.copyWith(
fontSize: 24.0,
fontWeight: FontWeight.w600,
),
),
colorScheme: Theme.of(context).colorScheme.copyWith(
secondaryContainer: Colors.lime,
),
),
child: SelectorWheel(
width: 60.0,
childCount: 4,
highlightBorderRadius: BorderRadius.circular(4),
convertIndexToValue: (int index) {
const fruits = [
'🍇',
'🍍',
'🍒',
'🥥',
'🍓',
'🥭',
'🍈'
];
final value = fruits[index];
return SelectorWheelValue(
label: value, value: value, index: index);
},
onValueChanged: (SelectorWheelValue<String> value) {
print(value);
},
),
)
],
),
),
],
),
),
),
);
}
}
class _Background extends StatelessWidget {
final Widget child;
const _Background({
Key? key,
required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: 300.0,
height: 180.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
color: Theme.of(context).colorScheme.surface,
),
child: child,
);
}
}
以上示例展示了如何使用 selector_wheel 插件创建不同风格和功能的选择器轮盘。你可以根据自己的需求进行调整和扩展。
更多关于Flutter选择器轮盘插件selector_wheel的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter选择器轮盘插件selector_wheel的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用selector_wheel插件的一个简单示例。selector_wheel是一个用于创建选择器轮盘的插件，通常用于日期选择、时间选择或任何需要从一组选项中选择一个的场景。
首先，确保你已经在pubspec.yaml文件中添加了selector_wheel依赖：
dependencies:
flutter:
sdk: flutter
selector_wheel: ^latest_version # 请替换为最新版本号
然后运行flutter pub get来获取依赖。
接下来，你可以在你的Flutter应用中使用SelectorWheel组件。以下是一个基本的例子，展示如何创建一个简单的选择器轮盘，用于选择数字1到10：
import 'package:flutter/material.dart';
import 'package:selector_wheel/selector_wheel.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Selector Wheel Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SelectorWheelDemo(),
);
}
}
class SelectorWheelDemo extends StatefulWidget {
@override
_SelectorWheelDemoState createState() => _SelectorWheelDemoState();
}
class _SelectorWheelDemoState extends State<SelectorWheelDemo> {
int selectedValue = 1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Selector Wheel Demo'),
),
body: Center(
child: SelectorWheel<int>(
itemCount: 10,
itemExtent: 50.0,
diameterRatio: 0.8,
itemBuilder: (context, index) {
return Center(
child: Text(
'${index + 1}',
style: TextStyle(fontSize: 24),
),
);
},
onSelectedItemChanged: (value) {
setState(() {
selectedValue = value!;
});
},
initialSelectedItem: selectedValue - 1, // 注意索引从0开始，所以需要减1
),
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Selected Value: $selectedValue'),
],
),
),
);
}
}
代码解释
-
依赖导入：
import 'package:flutter/material.dart'; import 'package:selector_wheel/selector_wheel.dart'; -
应用入口：
void main() { runApp(MyApp()); } -
主应用类：
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Selector Wheel Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: SelectorWheelDemo(), ); } } -
选择器轮盘演示页面：
- 创建一个状态类
_SelectorWheelDemoState来管理选择器的状态。 - 使用
SelectorWheel组件，设置itemCount为10（表示1到10的数字），itemExtent为每个项的高度，diameterRatio为轮盘的直径比例。 itemBuilder用于构建每个项，这里简单地显示数字。onSelectedItemChanged是当选中项改变时的回调函数，更新selectedValue状态。initialSelectedItem设置初始选中项，注意索引从0开始，所以需要减去1。
- 创建一个状态类
-
底部导航栏： 显示当前选中的值。
这个示例展示了如何使用selector_wheel插件创建一个简单的数字选择器。你可以根据需求自定义项的样式和行为。
