import 'package:flutter/material.dart';

class MinePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('我的')),
      body: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,   //每行个数
            mainAxisSpacing: 2.0,   //每行间距
            crossAxisSpacing: 2.0,  //每列间距
            childAspectRatio: 0.75  //长宽比
        ),
        children: <Widget>[
          new Image.network('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2557573348.webp',fit: BoxFit.cover),
          new Image.network('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1446261379.webp',fit: BoxFit.cover),
          new Image.network('https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1613191025.webp',fit: BoxFit.cover),
          new Image.network('https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2540924496.webp',fit: BoxFit.cover),
          new Image.network('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2174346180.webp',fit: BoxFit.cover),
          new Image.network('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p454118602.webp',fit: BoxFit.cover),
          new Image.network('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1998028598.webp',fit: BoxFit.cover),
          new Image.network('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p456676352.webp',fit: BoxFit.cover),
          new Image.network('https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1917567652.webp',fit: BoxFit.cover),
          new Image.network('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2398213627.webp',fit: BoxFit.cover),
          new Image.network('https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1637195728.webp',fit: BoxFit.cover),
          new Image.network('https://img9.doubanio.com/view/photo/s_ratio_poster/public/p1335271624.webp',fit: BoxFit.cover),
        ],
      )
    );
  }
}

本节课源码，图片是宫崎骏的电影，喜欢的朋友拿走不谢。

Scale值越大，图片越小。

Image.asset资源图片形式需慎用。

<h4>creating flutter project 卡死解决方案：</h4><p><a href="https://www.pianshen.com/article/5415414123/">https://www.pianshen.com/article/5415414123/</a></p><p><a href="https://blog.csdn.net/WierZheng/article/details/96277946">https://blog.csdn.net/WierZheng/article/details/96277946</a></p><p><br/></p>

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,   //每行个数
    mainAxisSpacing: 2.0,   //每行间距
    crossAxisSpacing: 2.0,  //每列间距
    childAspectRatio: 0.7  //长宽比
  ),

 GridView.count(
    padding: const EdgeInsets.all(10.0),
    crossAxisSpacing: 10.0,
    crossAxisCount: 3,
    children: <Widget>[
      const Text('I love'),
      const Text('I love'),
      const Text('I love'),
      const Text('I love'),
      const Text('I love'),
      const Text('I love'),
    ],
),

void main() => runApp(MyApp(
  items: List<String>.generate(1000, (i)=>'item $i')
));

class MyApp extends StatelessWidget{

  final List<String> items;
  MyApp({Key key, @required this.items}): super(key:key);

body: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index){
      return ListTile(
          title: Text('${items[index]}'),
      );
    },
)

body: ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.favorite_border),
      title: Text('favorite_border'),
      trailing: Icon(Icons.arrow_forward),
    ),ListTile(
      leading: Icon(Icons.favorite),
      title: Text('favorite'),
      trailing: Icon(Icons.arrow_forward),
    ),ListTile(
      leading: Icon(Icons.ac_unit),
      title: Text('ac_unit'),
      trailing: Icon(Icons.arrow_forward),
    ),ListTile(
      leading: Icon(Icons.android),
      title: Text('android'),
      trailing: Icon(Icons.arrow_forward),
    ),
    Image.network("https://img1.sycdn.imooc.com//szimg/5e4644f609ffdfa312000676-360-202.png"),
    Image.network("https://img1.sycdn.imooc.com//szimg/5e703f1408bd81a506000338-360-202.jpg"),
    Image.network("https://img1.sycdn.imooc.com//szimg/5e5621d0092c054612000676-360-202.png"),
    Image.network("https://img1.sycdn.imooc.com//szimg/5d1032ab08719e0906000338-360-202.jpg"),
    Image.network("https://img1.sycdn.imooc.com//szimg/5e6b4ede09bc3b4412000676-360-202.png"),
  ],
),

Image图片组件的使用

• Image Widget的几种加入形式

1. Image.asset：加载资源图片，会使打包时包体过大

2. Image.network：网络资源图片，经常换的或者动态的图片

3. Image.file:本地图片，比如相机照相后的图片预览

4. Image.memory:加载到内存中的图片，Uint8List
   

• Fit属性的详细讲解，（相当于小程序的mode）

1. fit: BoxFit.（）,

• 图片的混合模式

1. colorBlendMode: BlendMode.color

• Repeat属性让图片重复

1. repeat: ImageRepeat.（）,

decoration: new BoxDecoration(
  gradient: const LinearGradient(
      colors: [
        Colors.purple,
        Colors.orange,
        Colors.cyan,
        Colors.deepPurple,
        Colors.pink,
        Colors.cyanAccent,
        Colors.redAccent,
        Colors.limeAccent
      ])
),

渐变

Contains容器2

• padding内边距属性

• margin外边距属性

• decoration属性制作彩色背景

一，padding，margin内边距属性

1. edgelnsets.all():统一设置

2. Edgelnsets.fromLTRB(value1,value2,value3)

   
   

二，decoration修饰器（不能与color一起，不然冲突）

1. 设置容器的边框

2. BoxDecoration Widget讲解

3. LinearGradient设置背景颜色渐变

Container 有点类似Layout

Container(
  child: Text('Hello Flutter',
  style:TextStyle(fontSize: 50.0,
      color:Colors.orange),),
  alignment: Alignment.center,
  width: 300.0,
  height: 400.0,
  color: Colors.purple,
)

TextWidget文本组件

TextAlign：文本对齐属性

left/right/start/end 

maxLines：文本显示的最大行数

overflow：控制文本的溢出效果

clip：直接截断

ellipsis：省略号

fade： 

字体设置

style:TextStyle

fontSize: 18.0

color:Color.fromARGB(255,255,150,0)

decoration:TextDecoration.underline  下划线

decorationStyle:TextDecorationStyle.solid 实线

120fps

生态环境

flutter 120fps超高性能

fps：每秒传输帧数，每秒画面数

第三方组件：https://github.com/Solido/awesome-flutter法国人总结的好用的组件。

开始使用flutter的大厂：Alibaba Tencent JD