摘要: 列布局,即垂直布局Widget,类似于安卓中android:orientation="vertical"的LinearLayout布局,属性和Row的基本一样,不同的是设置布局顺序时Row使用textDirection,而Column使用verticalDirection。 verticalDire 阅读全文
posted @ 2020-03-13 17:09 lai1322 阅读(180) 评论(0) 推荐(0) 编辑
摘要: 行布局,即水平布局Widget,类似于安卓中android:orientation="horizontal"的LinearLayout布局,主要属性包括: mainAxisAlignment 主轴方向上的对齐方式,此处就是水平方向对齐方式。 crossAxisAlignment 垂直于主轴方向上的对 阅读全文
posted @ 2020-03-13 17:07 lai1322 阅读(226) 评论(0) 推荐(0) 编辑
摘要: 指定大小的盒子布局,可指定width和height宽高两个属性,其特点是可通过设置width=double.infinity和height=double.infinity来使盒子充满父Widget宽高。 Widget getSizedBox() { return SizedBox( width: d 阅读全文
posted @ 2020-03-13 17:05 lai1322 阅读(142) 评论(0) 推荐(0) 编辑
摘要: 指定子Widget的基线,包含两个主要属性: baseline 指定子Widget内容的基线位置,从外框也即是父控件的顶部位置开始定位基线位置。 baselineType 基线的类型,包括TextBaseline.ideographic和TextBaseline.alphabetic。 TextBa 阅读全文
posted @ 2020-03-13 17:04 lai1322 阅读(432) 评论(0) 推荐(0) 编辑
摘要: 控制子Widget对齐方式的Widget,包含以下属性: alignment 表示子Widget的对齐方式,包括Alignment.topLeft、Alignment.topCenter、Alignment.topRight、Alignment.centerLeft、Alignment.center 阅读全文
posted @ 2020-03-13 17:02 lai1322 阅读(276) 评论(0) 推荐(0) 编辑
摘要: 用于使子Widget居中的Widget。包含三个属性: widthFactor 宽度因子,表示为该Widget宽度比子Widget宽度的倍数。 heightFactor 高度因子,表示为该Widget高度比子Widget高度的倍数。 child 包含的子Widget。 Widget getCente 阅读全文
posted @ 2020-03-13 16:59 lai1322 阅读(249) 评论(0) 推荐(0) 编辑
摘要: 表示内边距的Widget,可用于控制子Widget与外部Widget的边距。主要有两个属性: padding 用于边距大小设置。 child 包含的子Widget。 Widget getPadding() { return Padding( padding: EdgeInsets.all(40.0) 阅读全文
posted @ 2020-03-13 16:25 lai1322 阅读(107) 评论(0) 推荐(0) 编辑
摘要: Container是最常用的布局Widget,表示一个容器,其主要属性包括: width 表示容器的宽度。 Height 表示容器的高度。 alignment 容器中内容的对齐方式,包括:Alignment.topLeft、Alignment.topCenter、Alignment.topRight 阅读全文
posted @ 2020-03-13 16:24 lai1322 阅读(578) 评论(0) 推荐(0) 编辑
摘要: 网格视图在UI界面开发时也是很常用的,比如相册、视频列表中经常会遇到,Flutter中通常使用GridView.count()和GridView.builder()方法来创建网格视图。 通过GridView.count()创建其主要的一些属性有部分和ListView中属性相同,不同的属性如下: cr 阅读全文
posted @ 2020-03-13 16:22 lai1322 阅读(155) 评论(0) 推荐(0) 编辑
摘要: 直接通过ListView()创建,主要属性介绍如下: scrollDirection 表示控件滚动的方向,主要有两个值可设置。Axis.vertical表示垂直滚动视图;Axis.horizontal表示水平滚动视图。 reverse 表示读取内容的方向是否颠倒,可设置值为true|false。fa 阅读全文
posted @ 2020-03-13 16:16 lai1322 阅读(149) 评论(0) 推荐(0) 编辑
摘要: Cupertino风格的标签栏,通常与CupertinoTabScaffold一起使用,作为CupertinoTabScaffold的tabBar属性值。具体使用方法如下: final List<String> _titles = ['首页', '产品', '更多']; final List<Tex 阅读全文
posted @ 2020-03-13 16:09 lai1322 阅读(630) 评论(0) 推荐(0) 编辑
摘要: Cupertino风格的顶部导航栏,通常与CupertinoPageScaffold一起使用。 CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: Center(child: Text('详情', style: 阅读全文
posted @ 2020-03-13 16:08 lai1322 阅读(731) 评论(0) 推荐(0) 编辑
摘要: Tabbar通常创建为AppBar的AppBar.bottom部分,使用方式如下: TabController _controller; int _selectedIndex = 0; final List<Widget> _tabViews = [ Container( child: Text(' 阅读全文
posted @ 2020-03-13 16:07 lai1322 阅读(250) 评论(0) 推荐(0) 编辑
摘要: 该Widget通常在Material design风格的页面框架Widget Scaffold中使用,作为Scaffold的一个bottomNavigationBar属性值。具体使用方法如下: int selectedIndex = 1; final widgetOptions = [ Text(' 阅读全文
posted @ 2020-03-13 15:59 lai1322 阅读(117) 评论(0) 推荐(0) 编辑
摘要: 该Widget通常作为子Widget传递给showCupertinoModalPopup方法,由该方法将其通过从屏幕底部向上滑动来显示。 showCupertinoModalPopup( context: context, builder: (context) { return CupertinoA 阅读全文
posted @ 2020-03-13 15:57 lai1322 阅读(324) 评论(0) 推荐(0) 编辑
摘要: 由于CupertinoDialog已经被标记为过时的Widget,这里就只介绍CupertinoAlertDialog的用法。 showDialog( //通过showDialog方法展示alert弹框 context: context, builder: (context) { return Cu 阅读全文
posted @ 2020-03-13 15:56 lai1322 阅读(395) 评论(0) 推荐(0) 编辑
摘要: BottomSheet一般不会直接创建,通常是通过ScaffoldState.showBottomSheet方法来创建持久性BottomSheet,通过showModalBottomSheet方法来创建模态BottomSheet。 // 创建持久性BottomSheet final GlobalKe 阅读全文
posted @ 2020-03-13 15:55 lai1322 阅读(420) 评论(0) 推荐(0) 编辑
摘要: SimpleDialog和AlertDialog本身都是一个Widget,使用时需要通过showDialog方法来展示 // 展示SimpleDialog showDialog( //展示Dialog的方法 context: context, builder: (context) { return 阅读全文
posted @ 2020-03-13 15:54 lai1322 阅读(526) 评论(0) 推荐(0) 编辑
摘要: CupertinoPicker( backgroundColor: Colors.white, //选择器背景色 itemExtent: 30, //item的高度 onSelectedItemChanged: (index) { //选中item的位置索引 print("index = $inde 阅读全文
posted @ 2020-03-13 15:53 lai1322 阅读(3210) 评论(0) 推荐(0) 编辑
摘要: CupertinoTimerPicker( mode: CupertinoTimerPickerMode.hms, //可以设置时分、时分秒和分秒三种模式 initialTimerDuration: Duration(hours: 1, minutes: 35, seconds: 50), // 默 阅读全文
posted @ 2020-03-13 15:51 lai1322 阅读(1014) 评论(0) 推荐(0) 编辑