前言

上篇文章已说明写flutter系列项目是在的想法, 已经完成了框架的搭建, 以及底部的导航的实现.
这篇文上介绍第一个导航页面的布局内容. 主要内容包括: 列表显示, 搜索框显示, 轮播图显示
效果图如下:

1.png

从上到下布局开始介绍

搜索框

首先在导航文件中添加

2.png

首先新建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: <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: <Widget>[
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                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, 网络数据请求