Flutter 开发之组件一
发表于：2024-11-24 作者：热门IT资讯网编辑
编辑最后更新 2024年11月24日，Flutter 的口号：一切谐为组件。同其他平台一样，Flutter 提供了一系列的组件，有基础组件（Basics Widgets），质感组件（Material Components）、Cuperti
Flutter 的口号：一切谐为组件。同其他平台一样，Flutter 提供了一系列的组件，有基础组件（Basics Widgets），质感组件（Material Components）、Cupertino 等。
Flutter 中基础组件的介绍，用法也比较简单。每个组件都是一个以类的形式存在。Flutter 的组件属性也很多，我们不可能记得每一项，只有经常使用或者了解一些关键属性，然后用到时再去查看具体属性。正所谓"流水的属性，铁打的组件"。
- Flutter的UI控件的使用方法
- Flutter Widget 索引
本篇主要介绍以下几个组件：
- Align-Align - 对齐组件
- Bar - 组件
- Box - 组件
- Button - 组件
一、Align-Align - 对齐组件
一个 widget，它可以将其子 widget 对齐，并可以根据子 widget 的大小自动调整大小。
import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Align组件', home: Scaffold( appBar: AppBar( title: Text('Align组件'), ), body:Container(// width: 200.0,// height: 200.0, color: Colors.red, child: Align( //对齐方式 //alignment: Alignment.bottomLeft, //对齐方式使用x,y来表示 范围是-1.0 - 1.0 alignment: Alignment(-0.5,-1.0), //宽高填充的系数 widthFactor: 3.0, heightFactor: 3.0, child: Container( color: Colors.green, width: 100.0, height: 50.0, child: Text('align',style: TextStyle(color: Colors.white),), ), ), ), ), ); }}二、Bar - 组件
2.1 AppBar 组件
状态栏上的右侧或左侧按钮，一个 Material Design 应用程序栏，由工具栏和其他可能的 widget（如 TabBar 和 FlexibleSpaceBar）组成。
import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'AppBar组件', home: Scaffold( appBar: AppBar( title: Text('标题'), //左侧图标 leading: Icon(Icons.home), //背景色 backgroundColor: Colors.green, //居中标题 centerTitle: true, actions: [ IconButton( icon: Icon(Icons.print), tooltip: '打印', onPressed: (){}, ), //菜单按钮 PopupMenuButton( itemBuilder: (BuildContext context) => >[ //菜单项 PopupMenuItem( value: 'friend', child: Text('分享到朋友圈'), ), PopupMenuItem( value: 'download', child: Text('下载到本地'), ), ], ), ], ), body: Container(), ), ); }} 2.2 bottomNavigationBar
底部导航条，可以很容易地在 tap 之间切换和浏览顶级视图。
return BottomNavigationBar( //底部按钮类型 固定样式 type: BottomNavigationBarType.fixed, //按钮大小 iconSize: 24.0, //点击里面的按钮回调的函数 onTap: _onItemTapped, //当前选中项索引 高亮显示 currentIndex: _currentIndex, //当类型为fixed时,选中项的颜色 fixedColor: Colors.red, items: [ BottomNavigationBarItem(title: Text('聊天'),icon: Icon(Icons.chat)), BottomNavigationBarItem(title: Text('朋友圈'),icon: Icon(Icons.refresh)), BottomNavigationBarItem(title: Text('我的'),icon: Icon(Icons.person)), ], ); 2.3 ButtonBar
未端对齐按钮容器 ButtonBar
child: ButtonBar( //对齐方式 默认为末端end alignment: MainAxisAlignment.spaceAround, ),2.4 FlexibleSpaceBar
可折叠的应用栏 FlexibleSpaceBar
body: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){ return [ SliverAppBar( //展开高度 expandedHeight: 150.0, //是否随着滑动隐藏标题 floating: false, //是否固定在顶部 pinned: true, //可折叠的应用栏 flexibleSpace: FlexibleSpaceBar( centerTitle: true, title: Text( '可折叠的组件', style: TextStyle( color: Colors.white, fontSize: 16.0, ), ), ), ), ]; }, body: Center( child: Text('向上提拉，查看效果'), ) ), ), ); 2.5 SliverAppBar
Sliver应用栏 SliverAppBar
body: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){ return [ SliverAppBar( //是否预留高度 primary:true, //标题前面显示的一个控件 leading: Icon(Icons.home), //操作按钮 actions: [ Icon(Icons.add), Icon(Icons.print), ], //设置阴影值 elevation: 10.0, //是否固定在顶部 pinned: true, //可扩展区域高度 expandedHeight: 200.0, //与floating结合使用 snap: false, //是否随着滑动隐藏标题 floating: false, //扩展区域 flexibleSpace: FlexibleSpaceBar( centerTitle: true, title: Text( '这是一个很酷的标题', style: TextStyle( color: Colors.white, fontSize: 16.0, ), ), ), ), ]; }, body: Center( child: Text( '拖动试试' ), ), ), 2.6 SnackBar
屏幕底部消息
return Center( child: GestureDetector( onTap: () { final snackBar = new SnackBar( //提示信息 content: Text('这是一个SnackBar'), //背景色 backgroundColor: Colors.green, //操作 action: SnackBarAction( textColor: Colors.white, label: '撤消', onPressed: () {}, ), //持续时间 duration: Duration(minutes: 1), ); Scaffold.of(context).showSnackBar(snackBar); }, child: Text('显示屏幕底部消息'), ), );2.7 TabBar
选项卡，一个显示水平选项卡的 Material Design widget。
class DemoPageState extends State with SingleTickerProviderStateMixin { ScrollController _scrollViewController; TabController _tabController; @override void initState(){ super.initState(); _scrollViewController = new ScrollController(); //长度要和展示部分的Tab数一致 _tabController = new TabController(vsync: this,length: 6); } @override void dispose(){ super.initState(); _scrollViewController.dispose(); _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return SizedBox( height: 500.0, child: Scaffold( appBar: AppBar( title: Text('选项卡'), //前置图标 leading: Icon(Icons.home), //应用栏背景色 backgroundColor: Colors.green, //选项卡 bottom: TabBar( controller: _tabController, //是否可以滚动 isScrollable: true, tabs: [ Tab(text: '科技',icon: Icon(Icons.camera),), Tab(text: '吃饭',icon: Icon(Icons.print),), Tab(text: '体育',icon: Icon(Icons.favorite),), Tab(text: '娱乐',icon: Icon(Icons.share),), Tab(text: '电影',icon: Icon(Icons.video_call),), Tab(text: '教育',icon: Icon(Icons.airline_seat_flat_angled),), ] ), ), //选项卡视图 body: TabBarView(controller: _tabController, children: [ Text('选项卡1'), Text('选项卡2'), Text('选项卡3'), Text('选项卡4'), Text('选项卡5'), Text('选项卡6'), ] ), ), ); }} 三、Box - 组件
3.1 ConstrainedBox
限定最大最小宽高容器，对其子项施加附加约束的 widget
//添加一个指定大小的盒子，限定其最大最小宽高 ConstrainedBox( constraints: const BoxConstraints( minWidth: 100.0, minHeight: 20.0, maxHeight: 60.0, maxWidth: 200.0, ), child: Container( width: 250, height: 80, child: Text( 'width>maxWidth height>maxHeight', style: TextStyle(color: Colors.white), ), color: Colors.green, ), ),3.2 DecoratedBox
装饰容器，DecoratedBox 可以在其子 widget 绘制前(或后)绘制一个装饰 Decoration（如背景、边框、渐变等）。
DecoratedBox
//添加装饰 child: DecoratedBox( //装饰定位 DecorationPosition.background背景模式 DecorationPosition.foreground前景模式 position: DecorationPosition.background, decoration: BoxDecoration( //背景色 color: Colors.grey, //设置背景图片 image: DecorationImage( //图片填充方式 fit: BoxFit.cover, image: ExactAssetImage('assets/view.jpeg'), ), //边框弧度 //borderRadius: BorderRadius.circular(10.0), border: Border.all( //边框颜色 color: Colors.red, //边框粗细 width: 6.0, ), //边框样式 shape: BoxShape.rectangle, ), child: Text('定位演示',style: TextStyle(fontSize: 36.0,color: Colors.green),), ),3.3 FittedBox
填充容器，按自己的大小调整其子 widget 的大小和位置。 FittedBox
/* BoxFit.fill //全部显示，显示可能拉伸，充满 BoxFit.contain //全部显示，显示原比例，不需充满 BoxFit.cover //显示可能拉伸，可能裁剪，充满 BoxFit.fitWidth //显示可能拉伸，可能裁剪，宽度充满 BoxFit.fitHeight //显示可能拉伸，可能裁剪，高度充满 BoxFit.none BoxFit.scaleDown //效果和contain差不多,但是此属性不允许显示超过源图片大小，可小不可大*/class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'FittedBox填充容器', home: new Scaffold( appBar: new AppBar( title: new Text('FittedBox填充容器'), ), body: Center( child: Column( children: [ Container( width: 300.0, height: 300.0, color: Colors.grey, child: FittedBox( //填充类型 fit: BoxFit.none, //居中对齐 alignment: Alignment.center, child: Image.asset('assets/view.jpeg'), ), ), ], ), ), ), ); }} 3.4 OverflowBox
溢出容器，对其子项施加不同约束的 widget，它可能允许子项溢出父级。 OverflowBox
//溢出容器 child: OverflowBox( //对齐方式 alignment: Alignment.topLeft, //限制条件 maxWidth: 300.0, maxHeight: 500.0, child: Container( color: Colors.blueGrey, width: 400.0, height: 400.0, ), ),3.5 RotatedBox
旋转容器，可以延顺时针以90度的倍数旋转其子 widget。RotatedBox
body: Center( child: Column( children: [ SizedBox( height: 20.0, ), RotatedBox( child: Text('ABCDE',style: TextStyle(fontSize: 28.0),), //旋转次数 每次旋转一圈的1/4 quarterTurns: 1, ), SizedBox( height: 20.0, ), RotatedBox( child: Text('ABCDE',style: TextStyle(fontSize: 28.0),), quarterTurns: 2, ), SizedBox( height: 20.0, ), RotatedBox( child: Text('ABCDE',style: TextStyle(fontSize: 28.0),), quarterTurns: 3, ), SizedBox( height: 20.0, ), RotatedBox( child: Text('ABCDE',style: TextStyle(fontSize: 28.0),), quarterTurns: 4, ), ], ), ), 3.6 SizedBox
指定宽高容器，一个特定大小的盒子。这个 widget 强制它的孩子有一个特定的宽度和高度。如果宽度或高度为 NULL，则此 widget 将调整自身大小以匹配该维度中的孩子的大小。
body:Center( //指定宽高容器 child不允许超出指定大小的范围 child: SizedBox( width: 200.0, height: 200.0, //限定图片大小 child: Image.asset('assets/cat.jpeg'), //子元素// child: Container(// width: 10.0,// height: 10.0,// color: Colors.green,// ), ), ),四、Button - 组件
4.1 DropdownButton
下拉按钮 DropdownButton
class DropdownButtonDemo extends StatelessWidget { List generateItemList(){ final List items = new List(); final DropdownMenuItem item1 = new DropdownMenuItem(child: Text('北京'),value: '北京',); final DropdownMenuItem item2 = new DropdownMenuItem(child: Text('上海'),value: '上海',); final DropdownMenuItem item3 = new DropdownMenuItem(child: Text('广州'),value: '广州',); final DropdownMenuItem item4 = new DropdownMenuItem(child: Text('深圳'),value: '深圳',); items.add(item1); items.add(item2); items.add(item3); items.add(item4); return items; } @override Widget build(BuildContext context) { return DropdownButton( //提示文本 hint: Text('请选择一个城市'), //下拉列表项数据 items: generateItemList(), value: selectItemValue, //下拉三角型图标大小 iconSize: 48.0, //下拉文本样式 style: TextStyle( color: Colors.green, ), //设置阴影高度 elevation: 24, //将下拉框设置为水平填充成父级 isExpanded: true, //下拉改变事件 onChanged: (T){ var obj = T; }, ); }} 4.2 FlatButton
一个扁平的 Material 按钮.
FlatButton
FlatButton.icon( onPressed: (){ }, icon: Icon(Icons.print,size: 36.0,), label: Text('默认按钮',style: TextStyle(fontSize: 36.0),), ), FlatButton( //文本 child: Text( 'Success', style: TextStyle(fontSize: 26.0), ), //按钮背景色 color: Colors.green, //按钮亮度 colorBrightness: Brightness.dark, //失效时的背景色 disabledColor: Colors.grey, //失效时的文本色 disabledTextColor: Colors.grey, //文本颜色 textColor: Colors.white, //按钮主题 ButtonTheme ButtonThemeData ButtonTextTheme ThemeData textTheme: ButtonTextTheme.normal, //墨汁飞溅的颜色 splashColor: Colors.blue, //抗锯齿能力 clipBehavior: Clip.antiAlias, //内边距 padding: new EdgeInsets.only( bottom: 5.0, top: 5.0, left: 20.0, right: 20.0, ), ),4.3 FloatingActionButton
跟 iOS 手机的小白点一样，一个圆形图标按钮，它悬停在内容之上，以展示应用程序中的主要动作。FloatingActionButton 通常用于Scaffold.floatingActionButton 字段。
FloatingActionButton
FloatingActionButton( //图标 child: const Icon(Icons.person), //提示信息 tooltip: '这是一个自定义的按钮', //背景色 backgroundColor: Colors.blue, //前景色 foregroundColor: Colors.white, //hero效果使用 heroTag: null, //未点击时的阴影 elevation: 8.0, //点击时的阴影 highlightElevation: 16.0, onPressed: () {}, // 是否为"mini"类型，默认为false,FAB 分为三种类型：regular, mini, and extended mini: false, //圆角方形的样式 shape: RoundedRectangleBorder( side: BorderSide( width: 2.0, color: Colors.white, style: BorderStyle.solid, ), borderRadius: BorderRadius.only( topRight: Radius.circular(8.0), topLeft: Radius.circular(8.0), bottomRight: Radius.circular(8.0), bottomLeft: Radius.circular(8.0), ), ), ),4.4 IconButton
一个 Material 图标按钮，点击时会有水波动画。
IconButton
child: IconButton( //图标 icon: Icon(Icons.print), //图标大小 iconSize: 48.0, //根据父容器来决定图标的位置 alignment: AlignmentDirectional.center, color: Colors.green, //墨汁飞溅效果 splashColor: Colors.blue, padding: EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0), //提示文本 tooltip: '一个打印图标', //按下 onPressed: () {}, ),4.5 RaisedButton
Material Design 中的 button， 一个凸起的材质矩形按钮。
RaisedButton
child: RaisedButton( //文本 child: Text( '点击登录按钮', style: TextStyle(fontSize: 26.0), ), //按钮背景色 color: Colors.green, //按钮亮度 colorBrightness: Brightness.dark, //失效时的背景色 disabledColor: Colors.grey, //失效时的文本色 disabledTextColor: Colors.grey, //文本颜色 textColor: Colors.white, //按钮主题 ButtonTheme ButtonThemeData ButtonTextTheme ThemeData textTheme: ButtonTextTheme.normal, //墨汁飞溅的颜色 splashColor: Colors.blue, //抗锯齿能力 clipBehavior: Clip.antiAlias, //内边距 padding: new EdgeInsets.only( bottom: 5.0, top: 5.0, left: 20.0, right: 20.0, ), shape: RoundedRectangleBorder( side: new BorderSide( width: 2.0, color: Colors.white, style: BorderStyle.solid, ), borderRadius: BorderRadius.only( topRight: Radius.circular(10.0), topLeft: Radius.circular(10.0), bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0), ), ), onPressed: () { print('按钮按下操作'); }, ),4.6 RawMaterialButton
RawMaterialButton
body: RawMaterialButton( onPressed: (){}, textStyle: TextStyle(fontSize: 28.0,color: Colors.black,), //文本 child: Text('RawMaterialButton组件'), //高亮时的背景色 highlightColor: Colors.red, //墨汁飞溅 splashColor: Colors.blue, //搞锯齿 clipBehavior: Clip.antiAlias, padding: EdgeInsets.only(bottom: 5.0,top: 5.0,left: 30.0,right: 30.0), //高亮时的阴影 highlightElevation: 10.0, ),待续
更多信息可以点击关于我 , 非常希望和大家一起交流 , 共同进步关于我