07Flutter ListView基礎列表組件、水平列表組件、圖標組件

ListView:

    ListView:參數

    scrollDirection:Axis.horizontal:水平列表。Axis.vertical垂直列表

    padding:內邊距。

    resolve:組件反向排序

    children:List<Widget>   列表元素

垂直列表組件：

main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter demo'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),
      //垂直列表：
      scrollDirection: Axis.vertical,
      children: <Widget>[
        ListTile(
          leading:
              Icon(Icons.settings, color: Colors.blue, size: 30), //前面的圖標：
          title: Text('北京音樂學院', style: TextStyle(fontSize: 18)),
          subtitle: Text('子標題'),
          trailing: Icon(Icons.settings, color: Colors.yellow, size: 30),
        ),
        ListTile(
          leading:Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover), //前面的圖標：
          title: Text('美國農民：對華貿易戰已讓我損失40萬美元', style: TextStyle(fontSize: 18)),
          subtitle: Text('美國《新聞周刊》8月27日文章，原題：北達科他州農民表示，倘若特朗普不會因貿易戰在其農場所在地區“失去100%”的支持，那么“人們就瘋了”  那些在經濟上遭受特朗普對華貿易政策重創的美國農民警告稱，美國對華貿易戰正使特朗普在其“農村票倉”失去大量支持，而正是來自農村的選票曾將他送進白宮。')
        ),
        Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover),
        Container(
          height: 40,
          padding: EdgeInsets.fromLTRB(0, 10,0,10),
          child: Text(
            '我是一個標題',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 18
            ),
          ),
        ),
        Image.network('https://www.itying.com/images/flutter/1.png',fit:BoxFit.cover)
      ],
    
    );
  }
}

水平列表組件：

 
          
            import 'package:flutter/material.dart'; 
           
          
 
          
            /* 
           
          
                  ListView:參數 
           
          
                scrollDirection:Axis.horizontal:水平列表。Axis.vertical垂直列表 
           
          
                padding:內邊距。 
           
          
                resolve:組件反向排序 
           
          
                children:List<Widget>   列表元素 
           
          
            */ 
           
          
 
          
            void main() { 
           
          
              runApp(MyApp()); 
           
          
            } 
           
          
 
          
            class MyApp extends StatelessWidget { 
           
          
              @override 
           
          
              Widget build(BuildContext context) { 
           
          
                // TODO: implement build 
           
          
                return MaterialApp( 
           
          
                  home: Scaffold( 
           
          
                    appBar: AppBar( 
           
          
                      title: Text('flutter demo'), 
           
          
                    ), 
           
          
                    body: HomeContent(), 
           
          
                  ), 
           
          
                ); 
           
          
              } 
           
          
            } 
           
          
 
          
            class HomeContent extends StatelessWidget { 
           
          
              @override 
           
          
              Widget build(BuildContext context) { 
           
          
                return Container( 
           
          
                  height: 180, 
           
          
                  child: ListView( 
           
          
                    padding: EdgeInsets.all(10), 
           
          
                    //水平列表： 
           
          
                    scrollDirection: Axis.horizontal, 
           
          
                    children: <Widget>[ 
           
          
                      Container( 
           
          
                        width: 180.0, 
           
          
                        height: 180.0, 
           
          
                        color: Colors.red, 
           
          
                      ), 
           
          
                      Container( 
           
          
                        width: 180.0, 
           
          
                        height: 180.0, 
           
          
                        color: Colors.blue, 
           
          
                      ), 
           
          
                      Container( 
           
          
                        width: 180.0, 
           
          
                        height: 180.0, 
           
          
                        color: Colors.red, 
           
          
                      ), 
           
          
                      Container( 
           
          
                        width: 180.0, 
           
          
                        height: 180.0, 
           
          
                        color: Colors.blue, 
           
          
                      ),Container( 
           
          
                        width: 180.0, 
           
          
                        height: 180.0, 
           
          
                        color: Colors.red, 
           
          
                      ), 
           
          
                      Container( 
           
          
                        width: 180.0, 
           
          
                        height: 180.0, 
           
          
                        color: Colors.blue, 
           
          
                      ) 
           
          
                    ], 
           
          
                  ), 
           
          
                ); 
           
          
              } 
           
          
            }