ListView Widget橫向列表

在上一篇Flutter學(xué)習(xí)筆記五——ListView Widget中認(rèn)識(shí)了ListView Widget的基本使用，默認(rèn)情況下是豎向列表,這一篇來(lái)了解一下橫向列表的使用。
其實(shí)ListView實(shí)現(xiàn)橫向列表，只需要添加ScrollDirection屬性。

body: Center(
        child: Container(
          height: 200.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Image.network("https://www.qq745.com/uploads/allimg/170416/17-1F4161H131Y9-lp.png"),
              Image.network("http://ww1.sinaimg.cn/thumb180/006am4TEgw1f3x8tq1gqrj31480qo7js.jpg"),
              Image.network("https://www.qq745.com/uploads/allimg/150907/2221003F2-0-lp.jpg"),
              Image.network("http://ww2.sinaimg.cn/thumb180/0066fqovgw1f75tu2nxhfj30ku0dvjtq.jpg"),
              Image.network("http://p5.sinaimg.cn/2782984404/180/14791407463112"),
            ],
          ),
        ),
      ),

效果如圖（GIF是用圖片生成的，不是很流暢，真機(jī)測(cè)試很流暢，無(wú)卡頓）：

hori.gif

ScrollDirection屬性

ListView組件的scrollDirection屬性只有兩個(gè)值，一個(gè)是橫向滾動(dòng)，一個(gè)是縱向滾動(dòng)。默認(rèn)的就是垂直滾動(dòng)，所以如果是垂直滾動(dòng)，我們一般都不進(jìn)行設(shè)置。

• Axis.horizontal:橫向滾動(dòng)或者叫水平方向滾動(dòng)。
• Axis.vertical:縱向滾動(dòng)或者叫垂直方向滾動(dòng)。

優(yōu)化代碼簡(jiǎn)介

上邊的代碼太多層嵌套，現(xiàn)在把ListView抽取出來(lái)，定義一個(gè)類來(lái)實(shí)現(xiàn)。

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Image.network(
            "https://www.qq745.com/uploads/allimg/170416/17-1F4161H131Y9-lp.png"),
        Image.network(
            "http://ww1.sinaimg.cn/thumb180/006am4TEgw1f3x8tq1gqrj31480qo7js.jpg"),
        Image.network(
            "https://www.qq745.com/uploads/allimg/150907/2221003F2-0-lp.jpg"),
        Image.network(
            "http://ww2.sinaimg.cn/thumb180/0066fqovgw1f75tu2nxhfj30ku0dvjtq.jpg"),
        Image.network("http://p5.sinaimg.cn/2782984404/180/14791407463112"),
      ],
    );
  }
}

然后在在MyAPP類里直接調(diào)用MyListView，這樣減少了嵌套，增加了代碼的閱讀性，更加便于維護(hù)。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Hello Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text("ListView Widget"),
            backgroundColor: Colors.indigoAccent,
            //標(biāo)題居中
            centerTitle: true,
          ),
          body: Center(
            child: Container(
              height: 200.0,
              child: MyListView()
            ),
          ),
        ));
  }
}