前言在这里我将分享最有用的 Flutter SDK 自带 Widget原文 medium.com/kaushikidu…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. SpacerSpacer 创建一个可调节的空间隔可用于调整 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 Bannerbanner 容器的形状是矩形的它扩展了完整的小部件。这个容器有一个前导图标、文本和操作按钮。一个 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. CheckboxListTileCheckboxListTile 是一个内置的小部件。我们可以说它是 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 TileFlutter 中的 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 TextSelectableText 小部件显示具有单个样式的文本字符串。根据布局约束字符串可以跨多行显示也可以全部显示在同一行上。SelectableText(This is selectable Text, style: const TextStyle(fontSize: 22), onSelectionChanged: (selection, cause) {}, ),完整源代码 github.com/kaushikikum…© 猫哥微信 ducafecatblog wiki.ducafecat.tech作者会煮咖啡的猫链接https://juejin.cn/post/7157065256967012388更多Android学习笔记视频资料请点击下方卡片获取~