Flutter水平选择器插件horizontal_picker的使用
Flutter水平选择器插件horizontal_picker的使用
Horizontal Picker 是一个在Flutter中用于实现水平选择器功能的插件。用户可以通过滚动来选择数值。
示例图片
安装
请参考 Pub.dev安装指南 进行插件的安装。
使用示例
以下是一个完整的示例代码,展示如何使用 HorizontalPicker
插件:
完整示例代码
import 'package:flutter/material.dart';
import 'package:horizontal_picker/horizontal_picker.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Horizontal Picker',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.grey,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double? newValue;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
HorizontalPicker(
minValue: 0,
maxValue: 10,
divisions: 10,
height: 120,
onChanged: (value) {},
),
Divider(),
HorizontalPicker(
minValue: 0,
maxValue: 10,
divisions: 10,
height: 120,
suffix: " °C",
showCursor: false,
backgroundColor: Colors.lightBlue.shade50,
activeItemTextColor: Colors.blue.shade800,
passiveItemsTextColor: Colors.blue.shade300,
onChanged: (value) {},
),
Divider(),
HorizontalPicker(
minValue: -10,
maxValue: 55,
divisions: 600,
height: 120,
suffix: " cm",
showCursor: false,
backgroundColor: Colors.grey.shade900,
activeItemTextColor: Colors.white,
passiveItemsTextColor: Colors.amber,
onChanged: (value) {
setState(() {
newValue = value;
});
},
),
Text(newValue?.toString() ?? 'No value selected')
],
),
),
),
);
}
}
参数说明
minValue
: 最小值。maxValue
: 最大值。divisions
: 刻度数量。suffix
: 数值后缀。showCursor
: 是否显示光标。backgroundColor
: 背景颜色。activeItemTextColor
: 当前选中项的文字颜色。passiveItemsTextColor
: 非选中项的文字颜色。onChanged
: 值改变时的回调函数。
通过这个插件,你可以轻松地在你的Flutter应用中添加一个美观且实用的水平选择器。希望这个示例对你有所帮助!
更多关于Flutter水平选择器插件horizontal_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter水平选择器插件horizontal_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用horizontal_picker
插件的一个基本示例。horizontal_picker
是一个Flutter插件,允许你创建一个水平选择器,用户可以在其中选择单个或多个选项。
首先,你需要在你的pubspec.yaml
文件中添加依赖项:
dependencies:
flutter:
sdk: flutter
horizontal_picker: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get
来安装依赖项。
接下来,你可以在你的Flutter项目中创建一个水平选择器。以下是一个简单的示例,展示了如何配置和使用horizontal_picker
。
import 'package:flutter/material.dart';
import 'package:horizontal_picker/horizontal_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Horizontal Picker Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HorizontalPickerExample(),
);
}
}
class HorizontalPickerExample extends StatefulWidget {
@override
_HorizontalPickerExampleState createState() => _HorizontalPickerExampleState();
}
class _HorizontalPickerExampleState extends State<HorizontalPickerExample> {
List<String> options = [
'Option 1',
'Option 2',
'Option 3',
'Option 4',
'Option 5',
];
int selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Horizontal Picker Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Selected Option: ${options[selectedIndex]}',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
HorizontalPicker(
data: options,
selectedIndex: selectedIndex,
onSelectedIndexChanged: (index) {
setState(() {
selectedIndex = index;
});
},
itemBuilder: (context, index, data) {
return Container(
alignment: Alignment.center,
margin: EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(
color: index == selectedIndex
? Colors.blue.withOpacity(0.3)
: Colors.transparent,
borderRadius: BorderRadius.circular(12),
),
child: Text(
data,
style: TextStyle(
color: index == selectedIndex ? Colors.blue : Colors.black,
fontSize: 18,
),
),
);
},
),
],
),
),
);
}
}
在这个示例中:
options
是一个包含选项的字符串列表。selectedIndex
用于存储当前选中的选项索引。HorizontalPicker
小部件用于显示水平选择器,并配置以下属性:data
:数据源,即选项列表。selectedIndex
:当前选中的索引。onSelectedIndexChanged
:当选中索引改变时的回调。itemBuilder
:用于构建每个选项的自定义小部件。
运行这个示例,你会看到一个简单的水平选择器,用户可以在其中选择选项,并且当前选中的选项会在界面上显示。
希望这能帮助你开始使用horizontal_picker
插件!如果你有任何其他问题,请随时询问。