Flutter SDK 自带的 10 个最有用的 Widget
前言
在这里我将分享最有用的 Flutter SDK 自带 Widget
原文 https://medium.com/@kaushikid…
1. Slider
咱们应用滑块小部件来更改值。因而，须要将值存储在变量中。这个小部件有一个滑块类，它须要 onChanged ()函数。当咱们扭转滑块地位时，这个函数将被调用。
示例代码
Slider(value: _value.toDouble(),
min: 1.0,
max: 20.0,
divisions: 10,
activeColor: AppColors.mainColor,
inactiveColor: Colors.grey.shade400,
label: 'Set volume value',
onChanged: (double newValue) {setState(() {_value = newValue.round();
});
},
semanticFormatterCallback: (double newValue) {return '${newValue.round()} dollars';
})),2. Range Slider
它是一个高度可定制的组件，能够从一系列值中抉择一个值。它能够从一组间断的或离散的值中进行抉择。
示例代码
RangeSlider(
values: _currentRangeValues,
min: 0,
max: 100,
activeColor: AppColors.mainColor,
inactiveColor: Colors.grey.shade400,
divisions: 10,
labels: RangeLabels(_currentRangeValues.start.round().toString(),
_currentRangeValues.end.round().toString(),
),
onChanged: (RangeValues values) {setState(() {_currentRangeValues = values;});
},3. Single Chip
芯片是一个 Material 设计小部件，内置 Flutter。它能够简略地形容为一个蕴含图标和文本 (通常是背景中的圆角矩形) 的紧凑元素。它能够有很多用处，比方它能够简略地用作一个按钮，用 CircleAvatar 和文本示意用户，或者在博客文章中应用主题标签等等。
示例代码
Chip(
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
avatar: const CircleAvatar(
backgroundColor: AppColors.mainColor,
child: Text("D"),
),
label: const Text("Dev"),
onDeleted: () {},
),4. Multiple Chip
咱们能够应用小部件芯片(过滤，显示多个芯片，抉择或删除芯片，等等)。让咱们看看这个例子。
示例代码
GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 3,
childAspectRatio: 4,
crossAxisSpacing: 5.0,
mainAxisSpacing: 5.0,
children: List.generate(nameList.length, (index) {
return Chip(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
avatar: CircleAvatar(
backgroundColor: AppColors.mainColor,
child: Text(nameList[index].substring(0, 1)),
),
label: Text(nameList[index]),
onDeleted: () {setState(() {nameList.removeAt(index);
});
},
);
})),5. Spacer
Spacer 创立一个可调节的空间隔，可用于调整 Flex 容器 (如 Row 或 Column) 中小部件之间的间距。Spacer 小部件将占用所有可用空间，因而设置 Flex。在蕴含到 MainAxisAlign 的距离的 flex 容器上进行 mainAxisAlign。
示例代码
const Spacer(),
Container(width: MediaQuery.of(context).size.width / 1,
height: 100,
color: AppColors.mainColor,
),
const Spacer(),
Container(width: MediaQuery.of(context).size.width / 1,
height: 100,
color: AppColors.mainColor,
),
const Spacer(),
Container(width: MediaQuery.of(context).size.width / 1,
height: 100,
color: AppColors.mainColor,
),
const Spacer(),6. Floating Action Button & BottomAppBar
让咱们容易做到这一点！
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
snap: false,
pinned: true, // it will pinned the app bar on top
floating: false,
flexibleSpace: const FlexibleSpaceBar(
centerTitle: false,
title: Text("Awesome Sliver AppBar",
style: TextStyle(
color: AppColors.whiteColor,
fontSize: 15.0,
)),
// background: ,
// Here you can use any image or gif in background
),
expandedHeight: 230,// fix the expanded height of the app bar
backgroundColor: AppColors.mainColor, // backgroundcolor of the expanded appbar and normal appbar (for both)
leading: IconButton(icon: const Icon(Icons.menu),
tooltip: 'Menu',
onPressed: () {},
),
actions: <Widget>[
IconButton(icon: const Icon(Icons.notifications_active),
tooltip: 'Comment Icon',
onPressed: () {},
),
IconButton(icon: const Icon(Icons.chat),
tooltip: 'Setting Icon',
onPressed: () {},
),
],
),
SliverList(
delegate: SliverChildBuilderDelegate((context, index) => Padding(padding: const EdgeInsets.all(15.0),
child: Container(height: MediaQuery.of(context).size.height / 5,
width: MediaQuery.of(context).size.width / 1,
decoration: BoxDecoration(
color: AppColors.cyanColor,
borderRadius: BorderRadius.circular(30)),
),
),
childCount: 8,
),
)
],
));
}6. Material Banner
- banner 容器的形态是矩形的，它扩大了残缺的小部件。
- 这个容器有一个前导图标、文本和操作按钮。
- 一个 banner 能够蕴含两个文本按钮，右边是遣散操作按钮，左边是确认操作按钮。
- Material banner 小部件是在 2.5.0 版本中引入的，因而要应用这个小部件，咱们须要最新版本。
示例代码
MaterialBanner(content: const Text('Your account has been deleted.'),
leading: const CircleAvatar(child: Icon(Icons.account_box),
),
actions: <Widget>[
TextButton(child: const Text('UNDO'),
onPressed: () {// Perform some action.},
),
TextButton(child: const Text('DISMISS'),
onPressed: () {// Perform some action.},
),
],
),7. CheckboxListTile
CheckboxListTile 是一个内置的小部件。咱们能够说它是 CheckBox 和 ListTile 的组合。它的属性，例如 value、activeColor 和 checkColor，与 CheckBox 小部件类似，title、subtitle、contentPadd 等与 ListTile 小部件类似。咱们能够点击 CheckBoxListTile 上的任何中央来 Google 这个复选框。
CheckboxListTile(
value: isChecked,
onChanged: (bool? newValue) {setState(() {isChecked = newValue;});
},
title: const Text("Checkbox List Tile"),
activeColor: Colors.orange,
checkColor: Colors.white,
tileColor: Colors.black12,
subtitle: const Text('This is a subtitle'),
controlAffinity: ListTileControlAffinity.leading,
tristate: true,
)8. Table
表小部件用于在表布局中显示项。不须要应用行和列来创立表。如果有多个行具备雷同的列宽，那么 Table 小部件是正确的办法。
Table(
textDirection: TextDirection.rtl,
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
border:
TableBorder.all(width: 2.0, color: AppColors.blackColor),
// ignore: prefer_const_literals_to_create_immutables
children: [
const TableRow(
decoration: BoxDecoration(color: AppColors.mainColor,),
children: [
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(padding: EdgeInsets.all(8.0),
child: Text(
"Name",
style: TextStyle(color: AppColors.whiteColor),
textScaleFactor: 1.1,
),
),
),
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(padding: EdgeInsets.all(8.0),
child: Text(
"Number",
style: TextStyle(color: AppColors.whiteColor),
textScaleFactor: 1.1,
),
),
),
TableCell(
verticalAlignment: TableCellVerticalAlignment.middle,
child: Padding(padding: EdgeInsets.all(8.0),
child: Text(
"Grade",
style: TextStyle(color: AppColors.whiteColor),
textScaleFactor: 1.1,
),
),
),
]),
...List.generate(
7,
(index) => const TableRow(children: [
TableCell(
verticalAlignment:
TableCellVerticalAlignment.middle,
child: Padding(padding: EdgeInsets.all(8.0),
child: Text(
"Name",
style: TextStyle(
fontSize: 14,
color: AppColors.blackColor),
textScaleFactor: 1,
),
),
),
TableCell(
verticalAlignment:
TableCellVerticalAlignment.middle,
child: Padding(padding: EdgeInsets.all(8.0),
child: Text(
"Number",
style: TextStyle(
fontSize: 14,
color: AppColors.blackColor),
textScaleFactor: 1,
),
),
),
TableCell(
verticalAlignment:
TableCellVerticalAlignment.middle,
child: Padding(padding: EdgeInsets.all(8.0),
child: Text(
"Grade",
style: TextStyle(
fontSize: 14,
color: AppColors.blackColor),
textScaleFactor: 1,
),
),
),
]))
],
),9. Grid Tile
Flutter 中的 GridTile 是无状态小部件的一个子类，它是一个可滚动的瓦片网格。
Center(
child: ClipRRect(borderRadius: BorderRadius.circular(10),
child: SizedBox(height: MediaQuery.of(context).size.height / 3,
width: MediaQuery.of(context).size.width / 2,
child: GridTile(
// header: const GridTileBar(
// backgroundColor: Colors.blueGrey,
// title: Text(
// "Product Title",
// textAlign: TextAlign.center,
// ),
// ),
child: GestureDetector(onTap: () {},
child: Container(color: Colors.black12,)),
footer: GridTileBar(
backgroundColor: Colors.blueGrey,
leading: IconButton(icon: const Icon(Icons.favorite),
color: Colors.white,
onPressed: () {},
),
title: const Text(
"Title",
textAlign: TextAlign.center,
),
trailing: IconButton(
icon: const Icon(Icons.shopping_cart,),
onPressed: () {},
color: Colors.white,
),
),
),
),
),
),10. Selectable Text
SelectableText 小部件显示具备单个款式的文本字符串。依据布局束缚，字符串能够跨多行显示，也能够全副显示在同一行上。
SelectableText('This is selectable Text',
style: const TextStyle(fontSize: 22),
onSelectionChanged: (selection, cause) {},),残缺源代码 Https://github.com/kaushikikumari/medium_article_11
© 猫哥
- 微信 ducafecat
- blog https://wiki.ducafecat.tech
本文由 mdnice 多平台公布