Flutter组合选择插件flutter_combo_box的使用
Flutter组合选择插件flutter_combo_box的使用
这个插件帮助你使用带有标题、标题加副标题或标题加图标的自定义下拉选择器。
使用
要使用此插件，将flutter_combo_box作为依赖项添加到你的pubspec.yaml文件中：
dependencies:
flutter:
sdk: flutter
flutter_combo_box: ^0.0.2+5 # 添加这一行
在主文件中导入该包：
import 'package:flutter_combo_box/flutter_combo_box.dart';
组合选择框类型
- 带有标题的组合选择框
- 带有标题和副标题的组合选择框
- 带有图标和标题的组合选择框
标题
TileTitle({String title, Color accent = Colors.blue})
标题和副标题
TileTitleSubTitle({String title, String description, Color accent = Colors.purple})
图标和标题
TileIconTitle({IconData icon, String title, Color background = Colors.indigo})
示例
import 'package:flutter/material.dart';
import 'package:flutter_combo_box/components/combo_box.dart';
import 'package:flutter_combo_box/flutter_combo_box.dart';
class ExampleComboBoxPage extends StatefulWidget {
[@override](/user/override)
_ExampleComboBoxPageState createState() => _ExampleComboBoxPageState();
}
class Gender {
final String? title;
final String? subtitle;
Gender({this.title, this.subtitle});
}
class _ExampleComboBoxPageState extends State<ExampleComboBoxPage> {
var genders = ['Male', 'Female', 'Undefined'];
var genderTitleSubTitles = [
Gender(title: 'Male', subtitle: 'The male gender'),
Gender(title: 'Female', subtitle: 'The female gender'),
Gender(title: 'Undefined', subtitle: 'The undefined gender')
];
late Future<List<dynamic>> datas;
String selectedGender = '';
var selectedGenderTitleSubTitle = Gender();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
padding: EdgeInsets.symmetric(horizontal: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// 示例1：ComboBoxFuture
Container(
child: ComboBoxFuture(
label: 'Custom label',
hint: 'Custom hint',
datas: datas,
onChanged: (item) {},
)
),
SizedBox(height: 16),
// 示例2：带有标题的下拉选择框
Container(
child: Center(
child: DropdownButtonFormField<String>(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 0),
labelText: 'Gender',
hintText: 'Please select the gender here',
hintStyle: TextStyle(color: Colors.grey, fontSize: 16, fontWeight: FontWeight.w800),
alignLabelWithHint: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.black26),
gapPadding: 16,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.black26),
gapPadding: 16,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.black26),
gapPadding: 16,
),
),
items: genders.map((item) {
return DropdownMenuItem(
child: TileTitle(title: item, accent: Colors.red),
value: item,
);
}).toList(),
onChanged: (value) => setState(() => selectedGender = value ?? 'N/A'),
value: selectedGender,
),
),
),
SizedBox(height: 16),
// 示例3：带有标题和副标题的下拉选择框
Container(
child: Center(
child: DropdownButtonFormField<Gender>(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 0),
labelText: 'Gender with Subtitle',
hintText: 'Please select the gender here',
hintStyle: TextStyle(color: Colors.grey, fontSize: 16, fontWeight: FontWeight.w800),
alignLabelWithHint: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.black26),
gapPadding: 16,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.black26),
gapPadding: 16,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.black26),
gapPadding: 16,
),
),
items: genderTitleSubTitles.map((item) {
return DropdownMenuItem(
child: TileTitleSubTitle(title: item.title, subtitle: item.subtitle, accent: Colors.red),
value: item,
);
}).toList(),
onChanged: (value) => setState(() => selectedGenderTitleSubTitle = value ?? Gender()),
value: selectedGenderTitleSubTitle,
),
),
),
],
),
),
);
}
}
更多关于Flutter组合选择插件flutter_combo_box的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter组合选择插件flutter_combo_box的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
flutter_combo_box 是一个用于 Flutter 的组合选择插件，它允许用户通过下拉列表选择多个选项。这个插件通常用于需要用户从多个选项中进行多选的场景。
以下是如何在 Flutter 项目中使用 flutter_combo_box 插件的步骤：
1. 添加依赖
首先，在你的 pubspec.yaml 文件中添加 flutter_combo_box 的依赖：
dependencies:
flutter:
sdk: flutter
flutter_combo_box: ^1.0.0 # 请检查最新版本
然后运行 flutter pub get 来获取依赖。
2. 导入包
在你的 Dart 文件中导入 flutter_combo_box 包：
import 'package:flutter_combo_box/flutter_combo_box.dart';
3. 使用 ComboBox
你可以在你的 widget 树中使用 ComboBox 组件。以下是一个简单的示例：
import 'package:flutter/material.dart';
import 'package:flutter_combo_box/flutter_combo_box.dart';
class MyComboBoxExample extends StatefulWidget {
@override
_MyComboBoxExampleState createState() => _MyComboBoxExampleState();
}
class _MyComboBoxExampleState extends State<MyComboBoxExample> {
List<String> _selectedItems = [];
final List<String> _items = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ComboBox Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: ComboBox<String>(
items: _items,
selectedItems: _selectedItems,
onChanged: (selectedItems) {
setState(() {
_selectedItems = selectedItems;
});
},
isMultiSelect: true,
hintText: 'Select items',
),
),
);
}
}
4. 运行应用
现在你可以运行你的 Flutter 应用，并查看 ComboBox 的效果。用户可以通过点击下拉列表来选择多个选项。
参数说明
items: 一个包含所有可选项的列表。selectedItems: 一个包含当前选中项的列表。onChanged: 当用户选择或取消选择某个选项时触发的回调函数。isMultiSelect: 是否允许多选，默认值为true。hintText: 下拉列表的提示文本。
自定义样式
你可以通过传递 style 参数来自定义 ComboBox 的样式。例如：
ComboBox<String>(
items: _items,
selectedItems: _selectedItems,
onChanged: (selectedItems) {
setState(() {
_selectedItems = selectedItems;
});
},
isMultiSelect: true,
hintText: 'Select items',
style: ComboBoxStyle(
backgroundColor: Colors.white,
borderColor: Colors.blue,
borderRadius: BorderRadius.circular(8.0),
textStyle: TextStyle(color: Colors.black),
hintTextStyle: TextStyle(color: Colors.grey),
),
);