第三节 Image、ListView、GridView

Image

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
        body: Center(
          child: Container(
           child: Image.network(
             'http://img5.duitang.com/uploads/item/201410/02/20141002212239_zWR55.jpeg',
             scale: 10.0,
             //控制图片重复，横向或纵向
             //repeat: ImageRepeat.repeatX,
             //控制图片填充
             //fit: BoxFit.cover,
             //混合模式,Android中也有这个
             color: Colors.red,
             colorBlendMode: BlendMode.darken,
           ),
            width: 500.0,
            height: 500.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }

}

Image使用演示

ListView

item为图片加文本

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
        body:ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.ac_unit),
              title: Text('listview的item1'),
            ),
            ListTile(
              leading: Icon(Icons.access_alarm),
              title: Text('listview的item2'),
            ),
            ListTile(
              leading: Icon(Icons.account_balance),
              title: Text('listview的item3'),
            )
          ],

        ),
      ),
    );
  }

}

image.png

item为网络图片

main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
        body:ListView(
          children: <Widget>[
            Image.network(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551257666171&di=0fd2e063a8c8f9f5da3156282b0334fc&imgtype=0&src=http%3A%2F%2Fs6.album.sina.com.cn%2Fpic_3%2F49e6b0120200118h'
            ),
            Image.network(
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551257666172&di=9615d0e0dfc20ae13eb97e5d16d344b3&imgtype=0&src=http%3A%2F%2Fimage.tupian114.com%2F20120317%2F20364222.jpg'
            ),
            Image.network(
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551257688758&di=a2f8bba51939481c128c292f7fc9d737&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1856556829%2C2188189730%26fm%3D214%26gp%3D0.jpg'
            ),
          ],

        ),
      ),
    );
  }

}

图片ListView

横向的ListView

main.dart文件

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
       body: Center(
        child: Container(
          height: 200.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 180.0,
                color: Colors.blue,
              ),
              Container(
                width: 180.0,
                color: Colors.red,
              ),
              Container(
                width: 180.0,
                color: Colors.amber,
              ),
              Container(
                width: 180.0,
                color: Colors.black87,
              ),
              Container(
                width: 180.0,
                color: Colors.pink,
              ),
            ],
          ),
        ),
       ),
      ),
    );
  }

}

横向的ListView

优化代码

提取ListView
main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
       body: Center(
        child: Container(
          height: 200.0,
          child: MListView()
        ),
       ),
      ),
    );
  }



}
class MListView extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
          width: 180.0,
          color: Colors.blue,
        ),
        Container(
          width: 180.0,
          color: Colors.red,
        ),
        Container(
          width: 180.0,
          color: Colors.amber,
        ),
        Container(
          width: 180.0,
          color: Colors.cyan,
        ),
        Container(
          width: 180.0,
          color: Colors.pink,
        ),
      ],
    );
  }

}

展示动态数据的ListView

main.dart文件

void main() =>runApp(MyApp(
  items:new List.generate(1000, (i)=>"Item $i")
));

class MyApp extends StatelessWidget
{
  final List items;
  MyApp({Key key,@required this.items}):super(key:key);
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
       body: new ListView.builder(
         itemCount: items.length,
         itemBuilder: (context,index){
         return new ListTile(
           //注意${items[index]}中的大括号
           title:new Text('${items[index]}'),
         );
       },
       )
      ),
    );
  }
}

动态展示ListView的item

GridView

main.dart文件

void main() =>runApp(MyApp(
  items:new List.generate(1000, (i)=>"Item $i")
));

class MyApp extends StatelessWidget
{
  final List items;
  MyApp({Key key,@required this.items}):super(key:key);
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
       body: new GridView.count(
           crossAxisCount: 3,
         children: <Widget>[
           const Text('First',
             style: TextStyle(
               color: Colors.cyan
             ),
           ),
           const Text('Two'),
           const Text('Three'),
           const Text('Four'),
           const Text('Five'),
           const Text('Three'),
         ],
         padding: const EdgeInsets.all(10.0),
         //每个网格之间的间距
         crossAxisSpacing: 20.0,


       )
      ),
    );
  }
}

image.png

GridView展示图片

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: '第一个flutter程序',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '这个是appbar 哈'
          ),
        ),
       body: GridView(
         padding: EdgeInsets.all(10.0),
           gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
               crossAxisCount: 3,
               //纵向间距
               mainAxisSpacing: 20.0,
               //横向间距
               crossAxisSpacing: 10.0,
               //宽高比
               childAspectRatio: 0.7
           ),
         children: <Widget>[
           new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
         ],
       )
      ),
    );
  }
}

image.png