摘要：
列布局，即垂直布局Widget，类似于安卓中android:orientation="vertical"的LinearLayout布局，属性和Row的基本一样，不同的是设置布局顺序时Row使用textDirection，而Column使用verticalDirection。 verticalDire 阅读全文
posted @ 2020-03-13 17:09
lai1322
阅读(189)
评论(0)
推荐(0)
摘要：
行布局，即水平布局Widget，类似于安卓中android:orientation="horizontal"的LinearLayout布局，主要属性包括： mainAxisAlignment 主轴方向上的对齐方式，此处就是水平方向对齐方式。 crossAxisAlignment 垂直于主轴方向上的对 阅读全文
posted @ 2020-03-13 17:07
lai1322
阅读(227)
评论(0)
推荐(0)
摘要：
指定大小的盒子布局，可指定width和height宽高两个属性，其特点是可通过设置width=double.infinity和height=double.infinity来使盒子充满父Widget宽高。 Widget getSizedBox() { return SizedBox( width: d 阅读全文
posted @ 2020-03-13 17:05
lai1322
阅读(149)
评论(0)
推荐(0)
摘要：
指定子Widget的基线，包含两个主要属性： baseline 指定子Widget内容的基线位置，从外框也即是父控件的顶部位置开始定位基线位置。 baselineType 基线的类型，包括TextBaseline.ideographic和TextBaseline.alphabetic。 TextBa 阅读全文
posted @ 2020-03-13 17:04
lai1322
阅读(469)
评论(0)
推荐(0)
摘要：
控制子Widget对齐方式的Widget，包含以下属性： alignment 表示子Widget的对齐方式，包括Alignment.topLeft、Alignment.topCenter、Alignment.topRight、Alignment.centerLeft、Alignment.center 阅读全文
posted @ 2020-03-13 17:02
lai1322
阅读(285)
评论(0)
推荐(0)
摘要：
用于使子Widget居中的Widget。包含三个属性： widthFactor 宽度因子，表示为该Widget宽度比子Widget宽度的倍数。 heightFactor 高度因子，表示为该Widget高度比子Widget高度的倍数。 child 包含的子Widget。 Widget getCente 阅读全文
posted @ 2020-03-13 16:59
lai1322
阅读(268)
评论(0)
推荐(0)
摘要：
表示内边距的Widget，可用于控制子Widget与外部Widget的边距。主要有两个属性： padding 用于边距大小设置。 child 包含的子Widget。 Widget getPadding() { return Padding( padding: EdgeInsets.all(40.0) 阅读全文
posted @ 2020-03-13 16:25
lai1322
阅读(118)
评论(0)
推荐(0)
摘要：
Container是最常用的布局Widget，表示一个容器，其主要属性包括： width 表示容器的宽度。 Height 表示容器的高度。 alignment 容器中内容的对齐方式，包括：Alignment.topLeft、Alignment.topCenter、Alignment.topRight 阅读全文
posted @ 2020-03-13 16:24
lai1322
阅读(585)
评论(0)
推荐(0)
摘要：
网格视图在UI界面开发时也是很常用的，比如相册、视频列表中经常会遇到，Flutter中通常使用GridView.count()和GridView.builder()方法来创建网格视图。 通过GridView.count()创建其主要的一些属性有部分和ListView中属性相同，不同的属性如下： cr 阅读全文
posted @ 2020-03-13 16:22
lai1322
阅读(178)
评论(0)
推荐(0)
摘要：
直接通过ListView()创建，主要属性介绍如下： scrollDirection 表示控件滚动的方向，主要有两个值可设置。Axis.vertical表示垂直滚动视图；Axis.horizontal表示水平滚动视图。 reverse 表示读取内容的方向是否颠倒，可设置值为true|false。fa 阅读全文
posted @ 2020-03-13 16:16
lai1322
阅读(156)
评论(0)
推荐(0)
摘要：
Cupertino风格的标签栏，通常与CupertinoTabScaffold一起使用，作为CupertinoTabScaffold的tabBar属性值。具体使用方法如下： final List<String> _titles = ['首页', '产品', '更多']; final List<Tex 阅读全文
posted @ 2020-03-13 16:09
lai1322
阅读(646)
评论(0)
推荐(0)
摘要：
Cupertino风格的顶部导航栏，通常与CupertinoPageScaffold一起使用。 CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: Center(child: Text('详情', style: 阅读全文
posted @ 2020-03-13 16:08
lai1322
阅读(750)
评论(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
阅读(259)
评论(0)
推荐(0)
摘要：
该Widget通常在Material design风格的页面框架Widget Scaffold中使用，作为Scaffold的一个bottomNavigationBar属性值。具体使用方法如下： int selectedIndex = 1; final widgetOptions = [ Text(' 阅读全文
posted @ 2020-03-13 15:59
lai1322
阅读(118)
评论(0)
推荐(0)
摘要：
该Widget通常作为子Widget传递给showCupertinoModalPopup方法，由该方法将其通过从屏幕底部向上滑动来显示。 showCupertinoModalPopup( context: context, builder: (context) { return CupertinoA 阅读全文
posted @ 2020-03-13 15:57
lai1322
阅读(331)
评论(0)
推荐(0)
摘要：
由于CupertinoDialog已经被标记为过时的Widget，这里就只介绍CupertinoAlertDialog的用法。 showDialog( //通过showDialog方法展示alert弹框 context: context, builder: (context) { return Cu 阅读全文
posted @ 2020-03-13 15:56
lai1322
阅读(412)
评论(0)
推荐(0)
摘要：
BottomSheet一般不会直接创建，通常是通过ScaffoldState.showBottomSheet方法来创建持久性BottomSheet，通过showModalBottomSheet方法来创建模态BottomSheet。 // 创建持久性BottomSheet final GlobalKe 阅读全文
posted @ 2020-03-13 15:55
lai1322
阅读(444)
评论(0)
推荐(0)
摘要：
SimpleDialog和AlertDialog本身都是一个Widget，使用时需要通过showDialog方法来展示 // 展示SimpleDialog showDialog( //展示Dialog的方法 context: context, builder: (context) { return 阅读全文
posted @ 2020-03-13 15:54
lai1322
阅读(553)
评论(0)
推荐(0)
摘要：
CupertinoPicker( backgroundColor: Colors.white, //选择器背景色 itemExtent: 30, //item的高度 onSelectedItemChanged: (index) { //选中item的位置索引 print("index = $inde 阅读全文
posted @ 2020-03-13 15:53
lai1322
阅读(3266)
评论(0)
推荐(0)
摘要：
CupertinoTimerPicker( mode: CupertinoTimerPickerMode.hms, //可以设置时分、时分秒和分秒三种模式 initialTimerDuration: Duration(hours: 1, minutes: 35, seconds: 50), // 默 阅读全文
posted @ 2020-03-13 15:51
lai1322
阅读(1076)
评论(0)
推荐(0)
摘要：
CupertinoDatePicker( mode: CupertinoDatePickerMode.date, //日期时间模式，此处为日期模式 onDateTimeChanged: (dateTime) { //日期改变时调用的方法 if (dateTime == null) { return; 阅读全文
posted @ 2020-03-13 15:50
lai1322
阅读(2160)
评论(0)
推荐(0)
摘要：
showTimePicker( context: context, initialTime: TimeOfDay.now(), //初始化显示时间 ).then((timeOfDay) { //选择时间后点击OK拿到的时间结果 if(timeOfDay == null) { return; } pr 阅读全文
posted @ 2020-03-13 15:49
lai1322
阅读(501)
评论(0)
推荐(0)
摘要：
showDatePicker( context: context, initialDate: DateTime.parse("20181209"), //初始选中日期 firstDate: DateTime.parse("20181109"), //可选日期范围第一个日期 lastDate: Dat 阅读全文
posted @ 2020-03-13 15:47
lai1322
阅读(548)
评论(0)
推荐(0)
摘要：
Map<String, Text> map = {'apple': Text('Apple'), 'orange': Text('Orange'), 'banana': Text('Banana')}; String _fruit = 'apple'; CupertinoSegmentedContr 阅读全文
posted @ 2020-03-13 15:44
lai1322
阅读(787)
评论(0)
推荐(0)
摘要：
CupertinoSlider( value: _sliderValue, // 当前滑块定位到的值 onChanged: (val) { // 滑动监听 setState(() { // 通过setState设置当前值 _sliderValue = val; }); }, onChangeStar 阅读全文
posted @ 2020-03-13 15:43
lai1322
阅读(181)
评论(0)
推荐(0)
摘要：
bool _switchChecked = true; CupertinoSwitch( value: true, //开关值 ), CupertinoSwitch( value: false, ), CupertinoSwitch( value: _switchChecked, onChanged 阅读全文
posted @ 2020-03-13 15:42
lai1322
阅读(225)
评论(0)
推荐(0)
摘要：
double _sliderValue = 0.3; Slider( value: _sliderValue, // 当前滑块定位到的值 onChanged: (val) { // 滑动监听 setState(() { // 通过setState设置当前值 _sliderValue = val; } 阅读全文
posted @ 2020-03-13 15:41
lai1322
阅读(181)
评论(0)
推荐(0)
摘要：
bool _switchChecked = true; Switch( value: true, activeColor: Colors.blueAccent, // 激活状态开关颜色 activeTrackColor: Colors.lightBlue, //激活状态开关轨道颜色 onChange 阅读全文
posted @ 2020-03-13 15:40
lai1322
阅读(123)
评论(0)
推荐(0)
摘要：
String _character = 'A'; Radio<String>( value: 'A', // 代表的值 groupValue: _character, // 当前radio group选中的值，当该值与value值匹配时则被选中 onChanged: (String newValue 阅读全文
posted @ 2020-03-13 15:39
lai1322
阅读(181)
评论(0)
推荐(0)
摘要：
Checkbox( value: true, onChanged: null, tristate: true, ), Checkbox( value: null, // 为null时tristate值必须为true，表示有三种状态 onChanged: (checked) {}, activeCol 阅读全文
posted @ 2020-03-13 15:38
lai1322
阅读(212)
评论(0)
推荐(0)
摘要：
CupertinoTextField( controller: TextEditingController(text: 'Hello Flutter'), // 默认输入内容 ), CupertinoTextField( placeholder: 'please input something', 阅读全文
posted @ 2020-03-13 15:37
lai1322
阅读(2710)
评论(0)
推荐(0)
摘要：
TextField( controller: TextEditingController(text: 'Hello Flutter'), // 默认输入内容 ), TextField( decoration: InputDecoration( //输入框装饰 hintText: 'please in 阅读全文
posted @ 2020-03-13 15:36
lai1322
阅读(154)
评论(0)
推荐(0)
摘要：
CupertinoButton( child: Text('Click'), disabledColor: Colors.blueGrey, //不可点击时按钮颜色，color属性不设置该值无效 onPressed: null, // onPressed为null视为不可点击 ), Cupertin 阅读全文
posted @ 2020-03-13 15:34
lai1322
阅读(154)
评论(0)
推荐(0)
摘要：
RaisedButton( onPressed: null, // onPressed为null视为不可点击 disabledTextColor: Colors.grey, // 不可点击的文本颜色 disabledColor: Colors.blue, // 不可点击的按钮颜色 disabledE 阅读全文
posted @ 2020-03-13 15:33
lai1322
阅读(258)
评论(0)
推荐(0)
摘要：
Icon( Icons.adb, ), Icon( Icons.adb, size: 50, //icon大小 ), Icon( Icons.adb, color: Colors.red, //icon颜色 ) 阅读全文
posted @ 2020-03-13 15:32
lai1322
阅读(178)
评论(0)
推荐(0)
摘要：
RichText( text: TextSpan( text: 'Flutter', style: TextStyle(color: Colors.black), children: <TextSpan>[ TextSpan( text: ' allows you', style: TextStyl 阅读全文
posted @ 2020-03-13 15:28
lai1322
阅读(237)
评论(0)
推荐(0)
摘要：
常用属性： crossAxisSpacing:网格间的空当。 crossAxisCount:一行放置的网格数量 body: GridView.count( padding: EdgeInsets.all(20.0), crossAxisSpacing: 10.0, crossAxisCount: 3 阅读全文
posted @ 2020-03-13 15:06
lai1322
阅读(111)
评论(0)
推荐(0)
摘要：
列表使用 body: new ListView( children: <Widget>[ /*new Image.network( 'https://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.p 阅读全文
posted @ 2020-03-13 15:04
lai1322
阅读(128)
评论(0)
推荐(0)
摘要：
加入图片的方式： Image.asset 项目资源图片 Image.file (绝对路径) 系统资源图片 Image.network（url） 网络资源图片 fit属性 BoxFit.fill BoxFit.contain BoxFit.cover repeat属性 ImageRepeat.repe 阅读全文
posted @ 2020-03-13 15:01
lai1322
阅读(567)
评论(0)
推荐(0)
摘要：
Alignment属性，Container内child的对齐方式，也就是容器子内容的对齐方式，并不是容器本身的对齐方式。 padding 内边距 margin 外边距 decoration 装饰器 使用： 1 body: new Center( 2 child: new Container( 3 c 阅读全文
posted @ 2020-03-13 15:00
lai1322
阅读(203)
评论(0)
推荐(0)
摘要：
属性 textAlign: TextAlign.left, 文本对齐方式 maxLines: 1, 显示最大行 overflow: TextOverflow.clip, 文本溢出的处理方式 clip：直接切断溢出的文字。 ellipsis:在后边显示省略号（...） 常用 fade: 渐变消失效果 阅读全文
posted @ 2020-03-13 14:57
lai1322
阅读(373)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2020-03-13 14:51
lai1322
阅读(103)
评论(0)
推荐(0)
摘要：
一个StatefulWidget类会对应一个State类，State表示与其对应的StatefulWidget要维护的状态，State中的保存的状态信息可以： 在widget 构建时可以被同步读取。 在widget生命周期中可以被改变，当State被改变时，可以手动调用其setState()方法通知 阅读全文
posted @ 2020-03-13 14:02
lai1322
阅读(331)
评论(0)
推荐(0)
摘要：
和StatelessWidget一样，StatefulWidget也是继承自Widget类，并重写了createElement()方法，不同的是返回的Element 对象并不相同；另外StatefulWidget类中添加了一个新的接口createState() 1 // StatefulWidget 阅读全文
posted @ 2020-03-13 12:03
lai1322
阅读(233)
评论(0)
推荐(0)
摘要：
build()方法有一个context参数，它是BuildContext类的一个实例，表示当前widget在widget树中的上下文，每一个widget都会对应一个context对象（因为每一个widget都是widget树上的一个节点）。实际上，context是当前widget在widget树中位 阅读全文
posted @ 2020-03-13 11:58
lai1322
阅读(201)
评论(0)
推荐(0)
摘要：
StatelessWidget用于不需要维护状态的场景，它通常在build方法中通过嵌套其它Widget来构建UI，在构建过程中会递归的构建其嵌套的Widget。 1 import 'package:flutter/material.dart'; 2 3 class Echo extends Sta 阅读全文
posted @ 2020-03-13 11:53
lai1322
阅读(333)
评论(0)
推荐(0)
浙公网安备 33010602011771号