Flutter中ImageView、ListView、GridView简单使用

学习Flutter的一点记录，主要是怕自己忘~

基本的快捷键

Android studio 中

1. 首先在Terminal中输入命令将项目跑起来

   flutter run
   

2. 显示网格 按下 P 键

3. 切换ios显示 按下O 键

4. 热更新按键是 command+\

VScode中

1. 使用 flutter run 运行项目

2. p显示网格，o是切换安卓和ios系统

3. 按下 r 键热更新。

4. 删除一行：command+shift+k

5. 复制一行：shift+option+⬆️或⬇️

6. 按住 option 再单击：选中多个光标

7. 创建新项目需要在Terminal 下使用命令
   flutter create 项目名称,

Flutter控件-ImageView

• 看下基本的代码

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

class WudanImageViewPage extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      title: 'Class Name',
      home: Scaffold(
        appBar: AppBar(title: Text('UIImageView')),
        body: Center(
          child: Image.network(//加载的是网络的图片
            "url",
            fit: BoxFit.cover,//fit 填充方式很多种
          ),
        ),
      ),
    );
  }
}

• 加载方式

  1. Image.asset：加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
  2. Image.network：网络资源图片
  3. Image.file：加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
  4. Image.memory：加载Uint8List资源图片

• fit属性

  fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的。看下常用的几个

  BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。

  BoxFit.contain:全图显示，显示原比例，可能会有空隙。
  BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。

  BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。

  BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。

  BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

• 图片的混合模式

  图片混合模式（colorBlendMode）和color属性配合使用，能让图片改变颜色，里边的模式非常的多，产生的效果也是非常丰富的。

  child: Image.network(
    'url,
      color: Colors.greenAccent,
      colorBlendMode: BlendMode.darken,
  ),
  

Flutter控件-ListView

• 基本操作-竖向列表展示

  import 'package:flutter/material.dart';
  void main() => runApp(MyApp());
  class MyApp extends StatelessWidget {
       
    @override
    Widget build(BuildContext context) {
       
      return MaterialApp(
          title: 'text widget',
          home: Scaffold(
            appBar: AppBar(title: Text('flutter hot')),
            body: new ListView(
              children: <Widget>[//数组，里面是单个的条目
                new ListTile(
                  leading: new Icon(Icons.access_alarm),
                  title: new Text("这是一个闹钟")
                ), new ListTile(
                  leading: new Icon(Icons.perm_camera_mic),
                  title: new Text("perm_camera_mic")