19-flutter的ListView 和 GridView的使用

ListView 的水平样式 和垂直样式

1 水平列表

import 'package:flutter/material.dart';

const CITY_LIST = ["北京","上海","广州","深圳","南京","郑州","武汉"];

void main() => runApp(MyApp());




class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Horizontal List';


    Widget _item(String city){
      return Container(
        width: 200,
        margin: EdgeInsets.only(right:5),
        alignment: Alignment.center,
        decoration: BoxDecoration(color: Colors.teal),
        child: Text(city,style:TextStyle(color:Colors.white,fontSize: 20)),
      );
    }


    List<Widget> _buildList(){
      return CITY_LIST.map((city) => _item(city)).toList();
    }

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(

          title: Text(title),
        ),
        body:Container(
          height: 200,
          child:  ListView(         
          scrollDirection: Axis.horizontal,
          children: _buildList(),
          ),
        )
      ),
    );
  }
}

2 基于ExpansionTile 实现可以展开的列表

  const ExpansionTile({
    Key key,
    this.leading,// 标题左侧要展示
    @required this.title,
    this.backgroundColor,// 背景色
    this.onExpansionChanged,// 
    this.children = const <Widget>[],// 展开的列表
    this.trailing,
    this.initiallyExpanded = false,
  })

import 'dart:core';

import 'package:flutter/material.dart';

const CITY_LIST = {
  '一线城市':["北京","上海","广州","深圳","南京","郑州","武汉"],
  '二线城市':["北京","上海","广州","深圳","南京","郑州","武汉"],
  '三线城市':["北京","上海","广州","深圳","南京","郑州","武汉"],
  '四线城市':["北京","上海","广州","深圳","南京","郑州","武汉"],
  '五线城市':["北京","上海","广州","深圳","南京","郑州","武汉"]
};

void main() => runApp(MyApp());




class MyApp extends StatelessWidget {

Widget _buildSub(String city){
      return FractionallySizedBox(
        widthFactor: 1,
        child: Container(
          height: 50,
          margin: EdgeInsets.only(bottom: 5),
          decoration: BoxDecoration(color: Colors.lightBlueAccent),
          child: Text(city),
        ),
      );
    }

    Widget _item(String city, List<String> subCities){
      return ExpansionTile(
        title: Text(city,style:TextStyle(color: Colors.black,fontSize: 20)),
        children: subCities.map((subcity) => _buildSub(subcity)).toList(),       
      );
    }

    List<Widget> _buildList(){
      List<Widget> widgets = [];
      CITY_LIST.keys.forEach((key){
          widgets.add(_item(key, CITY_LIST[key]));
      });
      return widgets;    
    }


  @override 
  Widget build(BuildContext context) {
    final title = '列表的展开与收起';
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(

          title: Text(title),
        ),
        body: ListView(                     
          children: _buildList(),
        ),
      ),
    );
  }
}

3 GridView 栅格布局

 
import 'dart:core';

import 'package:flutter/material.dart';

const CITY_LIST =  ["北京","上海","广州","深圳","南京","郑州","武汉"];
   
  

void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {

  

    Widget _item(String city){
      return Container(
        height: 80,
        margin: EdgeInsets.only(bottom: 5),
        alignment: Alignment.center,
        decoration: BoxDecoration(color: Colors.teal),
        child: Text(city,style: TextStyle(fontSize: 30,color: Colors.white)),
      );
    }

    List<Widget> _buildList(){
      return CITY_LIST.map((city) => _item(city)).toList();    
    }


  @override 
  Widget build(BuildContext context) {
    final title = 'GridView';
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(

          title: Text(title),
        ),
        body:GridView.count(
          // 这是列数
          crossAxisCount: 3,
          children: _buildList(),
        )
      ),
    );
  }
}