Flutter 組件之ListView列表、Icon圖標

垂直列表可以直接定義盒子寬度,列表的寬度不生效。水平列表要定義寬度

入口文件

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'movies.dart';

void main() {
  runApp(StudyListShow());
}

// 頁面主結構
class StudyListShow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("演員列表"),
        ),
        body: MoviesList(),
      ),
    );
  }
}

動態渲染列表for循環

 //動態渲染列表
 class MoviesList extends StatelessWidget {
  //for 循環
   List<Widget> _getListMovies() {//列表數組Widget類型
    List<Widget> moviList = new List();//創建空數組
    for (var i = 0; i < 20; i++) {
       moviList.add(ListTile(//ListTile列表子元素結構層
       	 leading: Icon(Icons.home),//頭部圖標
         title: Text("我是第$i"),//標題
         subtitle: Text("我是子標題"),//子標題
         trailing:Icon(Icons.search)//尾部圖標
       ));
     }
     return moviList;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
      return Container(
         child: ListView(children: this._getListMovies(),),
      );
    ));
  }
}

map循環數據

//動態渲染列表
class MoviesList extends StatelessWidget {
  //map循環數據
   List<Widget> _getMoveiDataList(){//列表數組
     var tempList = casts.map((value){//map遍歷
       return ListTile(//返回數組數據
         leading: Image.network(value["avatars"],width: 200,height: 200,fit: BoxFit.cover,),//網絡圖片leading
         title: Text(value["name"]),
         subtitle: Text(value["name_en"]),
       );
     });
     //其實返回的是這種格式,(ListTile(leading:....,title:...),ListTile(leading:....),ListTile(leading:....))
     return tempList.toList();//轉成List
   }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
     return Container(
         child: ListView(children: this._getListMovies(),),
      );
    ));
  }
}

ListView.builder 構建列表

  //ListView.builder 構建
  Widget _getMoveisForBuilder(context,index) {//這裏必須是Widget類型
    return ListTile(
      leading: Image.network(casts[index]["avatars"],width:100,height: 100,fit: BoxFit.cover,),
      title: Text(casts[index]["name"]),
      subtitle: Text(casts[index]["name_en"]),
      );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
      return ListView.builder(
        scrollDirection: Axis.horizontal,
       padding: EdgeInsets.all(10),
       itemCount: casts.length,
       itemBuilder:this._getMoveisForBuilder,
     );
  }
}

柵格 網格 GridView 佈局用法類似

import 'package:flutter/material.dart';
import 'movies.dart';

void main() {
  runApp(HomeApp());
}

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("Gradle View"),
      ),
      body: StudyGradleView(),
    ));
  }
}

//gradle view
class StudyGradleView extends StatelessWidget {
  // for 循環
   List<Widget> _getGridViewData() {
     List<Widget> listData = new List();
     for (var i = 0; i < 20; i++) {
       listData.add(Container(
         child: Text("着還是地$i條數據",textAlign: TextAlign.center,),
         decoration: BoxDecoration(
           color:Colors.pink
         ),
       ));
     }
     return listData.toList();
   }

// // map 循環
  List<Widget> _getGridViewData() {
    var tempList = casts.map((value){
        return Container(
          child: Column(
            children:<Widget>[
              Image.network(value['avatars']),
               SizedBox(height: 20,),
              Text(value['name'])
            ]
          ),
        );
    });
    return tempList.toList();
  }

  //GridView.count
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      padding: EdgeInsets.all(10),
      crossAxisSpacing: 10,
      crossAxisCount: 2,
      mainAxisSpacing: 10,
      children: this._getGridViewData(),
    );
  }
}

數據

List casts = [
  {
    "avatars":
        "https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p17525.jpg",
    "name_en": "Tim Robbins",
    "name": "蒂姆·羅賓斯",
    "alt": "https://movie.douban.com/celebrity/1054521/",
    "id": "1054521"
  },
  {
    "avatars":
        "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p34642.jpg",
    "name_en": "Morgan Freeman",
    "name": "摩根·弗里曼",
    "alt": "https://movie.douban.com/celebrity/1054534/",
    "id": "1054534"
  },
  {
    "avatars":
        "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p5837.jpg",
    "name_en": "Bob Gunton",
    "name": "鮑勃·岡頓",
    "alt": "https://movie.douban.com/celebrity/1041179/",
    "id": "1041179"
  },
  {
    "avatars":
        "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p67.jpg",
    "name_en": "Leslie Cheung",
    "name": "張國榮",
    "alt": "https://movie.douban.com/celebrity/1003494/",
    "id": "1003494"
  },
  {
    "avatars":
        "https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p46345.jpg",
    "name_en": "Fengyi Zhang",
    "name": "張豐毅",
    "alt": "https://movie.douban.com/celebrity/1050265/",
    "id": "1050265"
  },
  {
    "avatars":
        "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1399268395.47.jpg",
    "name_en": "Li Gong",
    "name": "鞏俐",
    "alt": "https://movie.douban.com/celebrity/1035641/",
    "id": "1035641"
  },
  {
    "avatars":
        "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p28603.jpg",
    "name_en": "Tom Hanks",
    "name": "湯姆·漢克斯",
    "alt": "https://movie.douban.com/celebrity/1054450/",
    "id": "1054450"
  },
  {
    "avatars":
        "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1537890386.77.jpg",
    "name_en": "Robin Wright",
    "name": "羅賓·懷特",
    "alt": "https://movie.douban.com/celebrity/1002676/",
    "id": "1002676"
  },
  {
    "avatars":
        "https://img9.doubanio.com/view/celebrity/s_ratio_celebrity/public/p26315.jpg",
    "name_en": "Gary Sinise",
    "name": "加里·西尼斯",
    "alt": "https://movie.douban.com/celebrity/1031848/",
    "id": "1031848"
  }
];