Flutter学习之布局、交互、动画

//第三行
Widget rowthreeWidget = Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Expanded(
child: Text(
“作者:EnjoyMoving”,
style: getTextStyle(Colors.grey[400], 14, true),
),
),
getPaddingfromLTRB(Text(
‘时间:2019-02-02’,
style: getTextStyle(Colors.black, ​
14, true),
), r :10.0),
getPaddingfromLTRB(Icon(
Icons.favorite_border,
color:Colors.grey[400],
),r:0.0)
],
);

1.5.整体

//根Widget
Widget ColumnWidget = Column(
//主轴上设置居中
mainAxisAlignment: MainAxisAlignment.center,
//交叉轴(水平方向)设置从左开始
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//第一行
getPaddingfromLTRB(Text(‘Java synchronized原理总结’,
style: getTextStyle(Colors.black, 16,true),
),t:0.0),
//第二行
getPaddingfromLTRB(rowWidget,t:10.0),
//第三行
getPaddingfromLTRB(rowthreeWidget,t:10.0),

],
);
return new Scaffold(
appBar: new AppBar(
title: new Text(‘Flutter Demo’),
),
//用card裹住
body: Card(
child: Container(
//高度
height: 160.0,
//颜色
color: Colors.white,
padding: EdgeInsets.all(10.0),
child: Center(
child: ColumnWidget,
)
),
),
);

最终效果如下：

2.布局二

直接上电影卡片布局，如下：

大致把图看了一遍，大致框架是最外层是用Row，左孩子是图片，右孩子是Column，其孩子分为五行，最后一行主演还是用Row来实现，上分析图：

2.1.实现右边图片

//根Widget 布局二 开始
//右边图片布局
Widget LayoutTwoLeft = Container(
//这次使用裁剪实现圆角矩形
child:ClipRRect(
//设置圆角
borderRadius: BorderRadius.circular(4.0),
child: Image.network(
‘https://img3.doubanio.com//view//photo//s_ratio_poster//public//p2545472803.webp’,
width: 100.0,
height: 150.0,
fit:BoxFit.fill,
),

),
);
//整体
Widget RowWidget = Row(
//主轴上设置居中
mainAxisAlignment: MainAxisAlignment.start,
//交叉轴(水平方向)设置从左开始
crossAxisAlignment: CrossAxisAlignment.center,
children: [
LayoutTwoLeft,
],
);

2.2.实现圆形头像

就是用自带的CircleAvatar这个Widget来实现：

//右下角圆形
CircleAvatar getCircleAvator(String image_url){
//圆形头像
return CircleAvatar(
backgroundColor: Colors.white,
backgroundImage: NetworkImage(image_url),
);
}

2.3.实现右边布局

右布局就是用一个Column来实现，一列一列往下实现即可：

//右布局
Widget LayoutTwoRightColumn = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//电影名称
Text(
‘流浪地球’,
style: getTextStyle(Colors.black, 20.0, true),
),

//豆瓣评分
Text(
‘豆瓣评分：7.9’,
style: getTextStyle(Colors.black54, 16.0, false),
),

//类型
Text(
‘类型：科幻、太空、灾难’,
style:getTextStyle(Colors.black54, 16.0, false),
),

//导演
Text(
‘导演：郭帆’,
style: getTextStyle(Colors.black54, 16.0, false),
),

//主演
Container(
margin: EdgeInsets.only(top:8.0),
child:Row(
children: [
Text(‘主演：’),
//以Row从左到右排列头像
Row(
children: [
Container(
margin: EdgeInsets.only(left:2.0),
child: getCircleAvator(‘https://img3.doubanio.com//view//celebrity//s_ratio_celebrity//public//p1533348792.03.webp’),
),
Container(
margin: EdgeInsets.only(left:12.0),
child: getCircleAvator(‘https://img3.doubanio.com//view//celebrity//s_ratio_celebrity//public//p1501738155.24.webp’),
),
Container(
margin: EdgeInsets.only(left:12.0),
child: getCircleAvator(‘https://img3.doubanio.com//view//celebrity//s_ratio_celebrity//public//p1540619056.43.webp’),
),

],
),
],
),
),
],
);

//布局二 右布局 用Expanded占满剩余空间
Widget LayoutTwoRightExpanded = Expanded(
child:Container(
//距离左布局10
margin:EdgeInsets.only(left:10.0),
//高度
height:150.0,
child: LayoutTwoRightColumn,
),
);

右布局用Expanded就是为了占满剩余空间。

2.4.整合

//整体
Widget RowWidget = Row(
//主轴上设置从开始方向对齐
mainAxisAlignment: MainAxisAlignment.start,
//交叉轴(水平方向)居中
crossAxisAlignment: CrossAxisAlignment.center,
children: [
LayoutTwoLeft,
LayoutTwoRightExpanded,
],
);
return new Scaffold(
appBar: new AppBar(
title: new Text(‘Flutter Demo’),
),
body: Card(
child: Container(
//alignment: Alignment(0.0, 0.0),
height: 160.0,
color: Colors.white,
padding: EdgeInsets.all(10.0),
child: Center(
// 布局一
// child: ColumnWidget,

// 布局二
child:RowWidget,
)
),
),
);

运行效果图如下：

3.布局三

同样直接上需求：

一看还是根布局直接用Column,一行一行实现就可以了，这个布局稍微简单一点，上分析图：

3.1.实现第一行

//布局三开始第一行
Widget LayoutThreeOne = Row(
children: [
Expanded(
child: Row(
children: [
Text(‘作者：’),
Text(‘HuYounger’,
style: getTextStyle(Colors.redAccent[400], 14, false),
),
],
)
),
//收藏图标
getPaddingfromLTRB(Icon(Icons.favorite,color:Colors.red),r:10.0),
//分享图标
Icon(Icons.share,color:Colors.black),
],
);

3.2.实现第三行

//布局三开始第三行
Widget LayoutThreeThree = Row(
children: [
Expanded(
child: Row(
children: [
Text(‘分类:’),
getPaddingfromLTRB(Text(‘开发环境/Android’,
style:getTextStyle(Colors.deepPurpleAccent, 14, false)),l:8.0),
],
),
),
Text(‘发布时间：2018-12-13’),
],
);

3.3.整合

//布局三整合
Widget LayoutThreeColumn = Column(
//主轴上设置居中
mainAxisAlignment: MainAxisAlignment.center,
//交叉轴(水平方向)设置从左开始
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//第一行
LayoutThreeOne,
//第二行
getPaddingfromLTRB(Text(‘Android Monitor使用介绍’,
style:getTextStyle(Colors.black, 18, false),
),t:10.0),
//第三行
getPaddingfromLTRB(LayoutThreeThree,t:10.0),
],

);
return new Scaffold(
appBar: new AppBar(
title: new Text(‘Flutter Demo’),
),
body: Card(
child: Container(
//alignment: Alignment(0.0, 0.0),
height: 160.0,
color: Colors.white,
padding: EdgeInsets.all(10.0),
child: Center(
// 布局一
// child: ColumnWidget,

// 布局二
// child:RowWidget,

// 布局三
child:LayoutThreeColumn,
)
),
),
);
}

运行效果：

4.添加ListView

上面实现了基本的布局，有了item后，那必须有ListView，这里简单模拟一下实现一下:

return new Scaffold(
appBar: new AppBar(
title: new Text(‘Flutter Demo’),
),
//ListView提供一个builder属性
body: ListView.builder(
//数目
itemCount: 20,
//itemBuilder是一个匿名回调函数，有两个参数，BuildContext 和迭代器index
//和ListView的Item项类似 迭代器从0开始 每调用一次这个函数，迭代器就会加1
itemBuilder: (BuildContext context,int index){
return Column(
children: [
cardWidget,
],
);

}),

);

发现屏幕上被20条Item项填充满，这里想想，把下拉刷新和上滑加载加上，Flutter肯定会有方法的。

4.1.下拉刷新

在Flutter已经提供和原生Android一样的刷新组件，叫做RefreshIndicator，是MD风格的，Flutter里面的ScrollView和子Widget都可以添加下拉刷新，只要在子``Widget的上层包裹一层RefreshIndicator`，先看看构造方法：</