前言
上篇文章已说明写flutter系列项目是在的想法, 已经完成了框架的搭建, 以及底部的导航的实现.
这篇文上介绍第一个导航页面的布局内容. 主要内容包括: 列表显示, 搜索框显示, 轮播图显示
效果图如下:
从上到下布局开始介绍
搜索框
首先在导航文件中添加
首先新建TextFieldWidget类, 其中代码如下:
class TextFieldWidget extends StatelessWidget {
Widget buildTextField() {
// theme设置局部主题
return Theme(
data: new ThemeData(primaryColor: Colors.grey),
child: new TextField(
cursorColor: Colors.grey, // 光标颜色
// 默认设置
decoration: InputDecoration(
contentPadding: const EdgeInsets.symmetric(vertical: 10.0),
border: InputBorder.none,
icon: Icon(Icons.search),
hintText: "搜索 flutter 组件",
hintStyle: new TextStyle(
fontSize: 14, color: Color.fromARGB(50, 0, 0, 0))),
style: new TextStyle(fontSize: 14, color: Colors.black),
),
);
}
@override
Widget build(BuildContext context) {
return Container(
// 修饰搜索框, 白色背景与圆角
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
),
alignment: Alignment.center,
height: 36,
padding: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),
child: buildTextField(),
);
}
}
主要说明已在代码中注释, 如有疑问可以讨论
轮播图
上网查询了一下,采用的是flutter_swiper: ^1.0.6这个库, 引入一下放到pubsec.yaml文件下.即可使用,代码如下:
new Container(
width: MediaQuery.of(context).size.width,
height: 200,
child: Swiper(
itemCount: 3,
itemBuilder: _swiperBuilder,
pagination: new SwiperPagination(
builder: DotSwiperPaginationBuilder(
color: Colors.black54,
activeColor: Colors.white,
size: 5.0,
activeSize: 5.0,
)),
scrollDirection: Axis.horizontal,
autoplay: true,
onTap: (index) => print('点击了第$index个')),
),
_swiperBuilder方法:
Widget _swiperBuilder(BuildContext context, int index) {
return (Image.network("http://via.placeholder.com/350x150",
fit: BoxFit.fill));
}
列表
new Expanded(
child: new ListView.builder(
itemCount: 10,
itemBuilder: _listBuilder,
),
)
_listBuilder方法:
Widget _listBuilder(BuildContext context, int index) {
return new Container(
padding: EdgeInsets.all(10.0),
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
decoration: new BoxDecoration(
boxShadow: [
new BoxShadow(
color: const Color(0x99000000),
offset: new Offset(0.0, 0.5),
blurRadius: 1.0,
),
],
color: Colors.white,
borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new Container(
margin: new EdgeInsets.only(bottom: 10.0),
child: new Text(
"8篇文章, 再学不会flutter你来打我!",
style: new TextStyle(fontSize: 14, color: Colors.black45),
),
),
new Text(
"我是作者",
style: new TextStyle(fontSize: 14, color: Colors.black45),
),
],
),
),
new Icon(
Icons.keyboard_arrow_right,
color: Colors.grey,
)
],
),
);
}
以上全部会展现出效果图的效果了.
重点讲解
- 1,一般组件TextField, text, image. 没有margin等属性, 需要用container包含
- 2, Expanded会撑起宽度.
- 3, Theme可设置局部主题. 一般在main中设置全局主题
下篇
下篇介绍内容如下
- 1, 导航跳转详情页面
- 2, 列表刷新加载,
- 3, 网络数据请求