上圖是要實現的效果，廢話不多說上程式碼。。由於涉及到公司的介面，所以程式碼裡涉及這塊就不貼出來了。

1 首先建立一個類 繼承 StatelessWidget 由於是我的模組 就命名為MineLayout

class ReadLayout extends StatelessWidget {
  @override
Widget build(BuildContext context) {
    Widget tabBarContainer = new TabBar(//建立TabBar例項
      isScrollable: true, //這個屬性是導航欄是否支援滾動，false則會擠在一起了
      unselectedLabelColor: Colors.grey
 
, //未選標籤標籤的顏色(這裡定義為灰色)
      labelColor: Colors.black,//選中的顏色（黑色）
      indicatorColor: Colors.black,//指示器顏色
      indicatorWeight: 2.0,//指示器厚度
      tabs: choices.map((Choice choice) {//選項卡
        return new Tab(
          text: choice.title,
        );
      }).toList(),
    );

    Widget tabContainer = new 
 
DefaultTabController(
      length: choices.length,
      initialIndex: 0, //初始索引
child: new Column(
        children: <Widget>[
          new Container(
            constraints: new BoxConstraints.expand(
              height:
                  Theme.of(context).textTheme.display1.fontSize * 1.1 
 
+ 50.0,
            ),
            padding: const EdgeInsets.all(8.0),
            color: Colors.teal.shade700,
            alignment: Alignment.center,
            child: tabBarContainer,
          ),
          new Expanded(
            child: new TabBarView(
              children: choices.map((Choice choice) {
                return new BookListView(categoryId: choice.categoryId);//一個屬於展示內容的listview
              }).toList(),
            ),
          ),
        ],
      ),
    );

    return tabContainer;
  }
}

注意：上面我不是沒有Appbar 的，所以預設會侵入到系統欄，所以我定義了高度

height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 50.0,

接著定義一個類去封裝頂部標籤

class Choice {
  const Choice({this.title,  this.categoryId});

  final String title;//這個引數是分類名稱
  final int categoryId;//這個適用於網路請求的引數，獲取不同分類列表
}

const List<Choice> choices = const <Choice>[

  const Choice(
    title: '通話故事',
    categoryId: 1,
  ),
  const Choice(
    title: '科幻靈異',
    categoryId: 2,
  ),
  const Choice(
    title: '經典名著',
    categoryId: 3,
  ),
  const Choice(
    title: '科普百科',
    categoryId: 4,
  ),
  const Choice(
    title: '歷史傳記',
    categoryId: 5,
  ),
  const Choice(
    title: '詩歌散文',
    categoryId: 6,
  ),
  const Choice(
    title: '幽默成長',
    categoryId: 7,
  ),
  const Choice(
    title: '寓言傳說',
  ),
];

接著我們來看listview 的具體實現吧。

原理很簡單，就是在初始化時載入用過非同步的方式載入網路資料，將請求到的資料放到定義好的集合裡面，然後呼叫setState方法重新構建widget。這時listview的itemcount就有數了。

class _BookListViewState extends State<BookListView> {
  List widgets = [];
  int bookId;
  String bookName;
  String coverKey;
  int picture;
  int media;
  int lang;
  int isQuestion;
  String author;
  String introduction;
  int downloadNum;
  String coverUrl;

//  final List<RowsBean> books;
@override
void initState() {
    // TODO: implement initState
super.initState();
    loadData(widget.categoryId);
  }

  @override
Widget build(BuildContext context) {
    return new Scaffold(
        body: new ListView.builder(
            itemCount: widgets.length,
            itemBuilder: (BuildContext context, int position) {
              return getRow(position);
            }));
  }

  loadData(int categoryId) async {
    String dataURL =
        "你的API?categoryId=$categoryId";
    http.Response response = await http.get(dataURL);
    print(response.body);
    Map data = JSON.decode(response.body);

    var retobj = data['retobj'];
    List rows = retobj['rows'];
    widgets = rows;
    setState(() {
//      JsonDecoder decoder = new JsonDecoder();
//
//      // 將給定的JSON字串輸入轉換為其對應的物件
//      List<List<RowsBean>> json = decoder.convert(response.body);
//      // 輸出給定的JSON資料
//      print(json[0][1]);
//      widgets = JSON.decode(response.body);
});
  }

  Widget getRow(int i) {
    return new BookListItem(
      bookId: widgets[i]['bookId'],
      bookName: widgets[i]['bookName'],
      coverKey: widgets[i]['coverKey'],
      picture: widgets[i]['picture'],
      media: widgets[i]['media'],
      lang: widgets[i]['lang'],
      isQuestion: widgets[i]['isQuestion'],
      introduction: widgets[i]['introduction'],
      downloadNum: widgets[i]['downloadNum'],
      author: widgets[i]['author'],
      coverUrl: widgets[i]['coverUrl'],
    );
  }
}

上面涉及到網路請求和json解析，樓主該開始也不知道怎麼解析，官方的都是返回的一個list型別的json，看看我們返回的json型別吧

接著就需要寫item的佈局了，佈局就是左邊一張圖，右邊一個模組，右邊模組採用線性佈局。

import 'package:flutter/material.dart';

import 'package:flutter/rendering.dart';

class BookListItem extends StatelessWidget {
  BookListItem(
      {this.bookId,
      this.bookName,
      this.coverKey,
      this.picture,
      this.media,
      this.lang,
      this.isQuestion,
      this.author,
      this.introduction,
      this.downloadNum,
      this.coverUrl})
      : super(key: new ObjectKey(bookId));
  int bookId;
  String bookName;
  String coverKey;
  int picture;
  int media;
  int lang;
  int isQuestion;
  String author;
  String introduction;
  int downloadNum;
  String coverUrl;

  @override
Widget build(BuildContext context) {
    print('bookId:$bookId');
    Widget titleSection = new Container(
      padding: const EdgeInsets.fromLTRB(12.0, 8.0, 0.0, 0.0),
      child: new Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          new Image.network(
            coverUrl,
            width: 107.0,
            height: 130.0,
          ),
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                new Container(
                  padding: const EdgeInsets.fromLTRB(6.0, 15.0, 24.0, 0.0),
                  child: new Text(
                    bookName,
                    style: new TextStyle(
                        fontWeight: FontWeight.bold, fontSize: 17.0),
                  ),
                ),
                new Container(
                  padding: const EdgeInsets.fromLTRB(6.0, 16.0, 24.0, 0.0),
                  child: new Text(
                    author,
                    style: new TextStyle(
                        fontWeight: FontWeight.bold, fontSize: 13.0),
                  ),
                ),
                new Container(
                  padding: const EdgeInsets.fromLTRB(6.0, 18.0, 24.0, 2.0),
                  child: new Text(
                    introduction,
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.start,
                    maxLines: 3,
                    style: new TextStyle(
                        fontSize: 12.0, fontStyle: FontStyle.normal),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );

    return titleSection;
  }
}

ok， 本節就說道這裡，文筆簡陋，見諒，歡迎私信，互相學習。。