设置背景颜色
Container(
decoration: new BoxDecoration(color: Colors.pink),
child: Column(
children: [
title(‘3D交互’),
title(‘开始训练模式’),
title(‘背景音乐’),
title(‘常见问题’),
],
),
appBar: AppBar(
backgroundColor: Colors.redAccent,
title: Text(‘运动’),
leading: Icon(Icons.ac_unit, color: Colors.white),
)
Container
- 功能齐全
- 设置text内外边距
EdgeInsets.fromLTRB(10,10,10,10) ，L表示左边距(left缩写)，T表示上边距(top缩写)，R表示右边距(right缩写)，B表示底边距(bottom缩写)，四个值可以分开写；
EdgeInsets.all(10)，上下左右边距均为10；
EdgeInsets.only(left: 10, right: 5, top: 10, bottom: 10)，可分别指定4个方向的边距值，如果只需要上边距，可以写成EdgeInsets.only( top: 10)；
EdgeInsets.symmetric(vertical: 20, horizontal: 10) ，可以指定垂直和水平方向的边距，也可以单独指定垂直或者水平方向的边距。如只需要垂直方向的边距，可写成EdgeInsets.symmetric(vertical: 20)；
EdgeInsets.fromWindowPadding()，创建与给定窗口填充匹配的insets。具体的用法目前还不知道,第一个参数是给定的widget的windowpadding，第二个是屏幕的分辨率
3.间隔使用SizedBox(width: 10),
下面展示一些 内联代码片。
new Container(
constraints: new BoxConstraints.expand(
height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
),
decoration: new BoxDecoration(
border: new Border.all(width: 2.0, color: Colors.red),
color: Colors.grey,
borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
image: new DecorationImage(
image: new NetworkImage('http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
),
),
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: new Text('Hello World',
style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black)),
transform: new Matrix4.rotationZ(0.3),
)
Container的alignment没起作用，是因为Container的大小没有设置，或者大小刚好包裹了子元素
appbar 属性
1.常用属性 在这里插入代码片说明
.leading 左侧 元素自定义，是一个widget部件
leadingWidth AppBar 的leading的宽度，假如leading 里是文字的话，如果不设置这个属性，当你的文字很多时，会换行的
title AppBar 的标题 ，也是一个widget
titleSpacing 设置AppBar 的标题 撑开左右 两边的 距离
centerTitle 控制AppBar 的标题是否居中，布尔值， 默认false，
actins AppBar 右侧附加的部分 ，比如一个按钮，一个文字等，需要传入一个List（数组）
backgroundColor AppBar 的背景色，传入一个Color类型的颜色， 如 Colors.red, Color(0xff45ff41)
elevation AppBar 的底部的 阴影区大小， 默认是4.0, 设置为0.0 会和 body 里的元素连在一起
shadowColor AppBar 的底部的 阴影颜色， 同 backgroundColor 参数用法
toolbarHeight 设置AppBar 部件的 高度 ，传入 double 类型的 值，如 25, 40.2
2.
appbar的title居中用 centerTitle: true,不需要用 margin: const EdgeInsets.only(left: 100, right: 0, top: 10, bottom: 10)
3.
appbar的高度怎么设置：
在该AppBar前加appBar: PreferredSize(preferredSize: Size.fromHeight(10),child: AppBar(不过一般情况下，appbar高度是一样的
row 子组件两端对齐
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(value),
Icon(Icons.arrow_forward_ios)
],
)
4.类里面都有 setState方法，要写到类里面
5.color: Colors.#F6F6F6-----color: Color(0xffF6F6F6)
6.ClipRRect不能裁剪container，contanner设置圆角边框
Cannot provide both a color and a decoration
7.图片设置点击事件并跳转
InkWell(
child: Icon(Icons.arrow_forward_ios,size: 15,),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MyHomePage2(),
),
);
listview
scrollDirection: Axis.horizontal,
1.实现大致相同的列表，ListTile是cell(每一个的item)是固定行高的。通过scrollDirection属性可以设置为水平列表
2. children参数，它接受一个Widget列表（List）。这种方式适合只有少量的子组件数量已知且比较少的情况，反之则应该使用ListView.builder 按需动态构建列表项。
3. ListView.builder的 itemCount是必须的
4.listviw要给长度，否则不能显示
5.全部属性：
leading, cell 左边的图标
title, cell 主标题
subtitle, cell 副标题
trailing, cell 右边图标
isThreeLine = false, cell 是否三行显示
dense, cell 直观感受是整体大小
contentPadding, cell 内容内边距
enabled = true, cell 是否可以响应
onTap, cell onTap cell点击事件
onLongPress, cell onLongPress 长按事件
selected = false, cell 是否选中状态
6.
listview上不要固定高度，就用expand
7.
listview里面包含listview.在里面的list view里面包含一个container，并指定高度。
ListTile
const ListTile({
Key key,
this.leading, //title之前的widget
this.title, //列表块的主要内容
this.subtitle, //title下方显示的内容
this.trailing, //标题后显示的widget，通常是一个[Icon]widget
this.isThreeLine = false, //是否打算显示三行文本
this.dense, //此列表图块是否是垂直密集列表的一部分，如果是true文本将会更小
this.visualDensity,
this.shape,
this.contentPadding, //内容与边框之间的边距，默认是16
this.enabled = true, //列表块是否可交互
this.onTap, //当用户点击此列表图块时调用
this.onLongPress, //当用户长按此列表图块时调用
this.mouseCursor,
this.selected = false, //如果选中列表块，文本和图标的颜色将成为主题的主颜色
this.focusColor,
this.hoverColor,
this.focusNode,
this.autofocus = false,
})
Text
Text(value,style: TextStyle(
fontSize: 14,
color: Color(0xff4F6770),
fontFamily: "PingFang SC",)),
)
点击事件
InkWell(
child: buildButtonColum(Icons.call, 'CALL'),
onTap:(){
print('CALL');
},
),
Image
'image/one.png', height: 10,
width: 10,
两个居中
Container(
height: 32,
width: 109,
alignment: Alignment.center,
decoration: new BoxDecoration(
color: Color(articlecolor),
borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
),
child: Text('文章',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: Color(0xff4F6770),
fontFamily: "PingFang SC",
)),
),
textAlign: TextAlign.center,只是让文本居中，因为它只占一行，所以不会在容器里垂直居中
Wrap
Wrap可以为子控件进行水平或者垂直方向布局，且当空间用完时，Wrap会自动换行，也是常说的流式?布局。
轮子
https://zhuanlan.zhihu.com/p/90035192
轮子名称：percent_indicator
轮子概述：flutter一个圆形和线形的进度条.
Stack
CustomPaint
可以称之为动画鼻祖，它可以实现任何酷炫的动画和效果。CustomPaint本身没有动画属性，仅仅是绘制属性，一般情况下，CustomPaint会和动画控制配合使用，达到理想的效果。
TabBar、TabBarView，TabController
提供了常见的多Tab切换的功能，例如电商网站上方横划的服装、家具、电子产品… 等切换页面，然后点击对应 tab 切换到不同专场这种功能。
集成监控App崩溃的功能
import ‘package:flutter_bugly/flutter_bugly.dart’;
flustars
依赖于Dart常用工具类库common_utils,以及对其他第三方库封装，致力于为大家分享简单易用工具类
1、SpUtil : 单例"同步"SharedPreferences工具类。支持get传入默认值，支持存储对象，支持存储对象数组。
2、ScreenUtil : 屏幕适配，获取屏幕宽、高、密度，AppBar高，状态栏高度，屏幕方向.
3、WidgetUtil : 监听Widget渲染状态，获取Widget宽高，在屏幕上的坐标，获取网络/本地图片尺寸.
4、DioUtil : 单例Dio网络工具类(已迁移至此处DioUtil)。
5、ImageUtil : 获取网络/本地图片尺寸.
双向数据绑定代码
TextField(
style: const TextStyle(color: Color(0xFFA7ABBB),fontSize: 15),
inputFormatters: [DecimalInputFormat(decimalRange: 4)],
keyboardType: TextInputType.numberWithOptions(signed: true),
controller: TextEditingController.fromValue(TextEditingValue(
text: item['number'],
selection: TextSelection.fromPosition(TextPosition(
affinity: TextAffinity.downstream,
offset: item['number'].length)
))
),
decoration: InputDecoration(
counterText: '',
filled: true,
fillColor: Color(0xFF1A1A1A),
hintStyle: const TextStyle(color: Color(0xFFA7ABBB),fontSize: 15),
hintText: '请输入数量',
contentPadding: EdgeInsets.symmetric(horizontal: 15,vertical: 10),
enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(6),borderSide: BorderSide.none),
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(6),borderSide: BorderSide.none),
suffixIcon: Container(alignment: Alignment.centerRight,child: Text('XBIT',style: const TextStyle(color: Color(0xFFA7ABBB),fontSize: 15),),margin: EdgeInsets.only(right: 15),),
suffixIconConstraints: BoxConstraints(maxWidth: 80)
),
onChanged: (v){undefined
item['number'] = v;
setState(() { });
},
)
text field
实现text field内字符串清空，先双向数据绑定，
2.
再次点击textfield光标会到前面，要在contraner中设置光标
controller: TextEditingController.fromValue(
TextEditingValue(
selection: TextSelection.fromPosition(
TextPosition(offset: _controller.length)),
text: _controller,
)),
3.
controller: TextEditingController.fromValue(TextEditingValue(
text: controller,
// selection: TextSelection.fromPosition(TextPosition(
// affinity: TextAffinity.downstream,
// offset: item[‘number’].length)
)),
历史记录
bug: //searchHistory.add(str); //不能添加进去Unsupported operation: Cannot add to an unmodifiable list
SpUtil.putStringList(‘search_history_list’, […searchHistory, str]);//直接用。。。语法添加生成一个数组
删除硬盘的内容用 SpUtil.remove(‘search_history_list’);但是没有删除内存的值，所以不会立刻消失，final是不能改变指向，但是可以用数组的clear方法清空
接口
接口返回的数据格式是json,需要被序列化才能被渲染
json转换成模块类，因为sdk版本高的问题导致不允许有空值的风险
父子组件传值的方法，不用provider，而是父子组件获取变量，因为provider，杀掉进程后历史记录就没有了
Scloolbar
添加滑动栏使用,这个必须是包裹的一个可滚组件，其他组件不行；不能设置滑动条的方向，
滑动条的方向是按滚动的方向来的，所以要设置滚动组件的滚动方向
debug,算法
算法中常见问题：遍历数组，却在过程中改变数组元素个数
RangeError (index): Invalid value: Not in inclusive range 0…12: 13 #0 List.[] (dart:core-patch/array.dart:268:52)
List searchedData； searchedData.add(initData[“problem”][“list”][i]);无法添加；应该List searchedData = [];
sp_util
import ‘package:sp_util/sp_util.dart’;
bool isLooked = SpUtil.getBool(‘is_looked’);
SpUtil.putBool(‘is_looked’, true);
SpUtil.remove(‘search_history_list’);
|