前言

上篇文章已說明寫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, 網絡數據請求