Flutter笔记(慕课网)

原作者：Andings
版权声明：本文版权归本人所有，未经作者许可，不得以任何形式转载

简介

Flutter学习笔记，学习途径包括但不仅限于：Flutter官网、慕课网、掘金/平台。

学习编写第一个Flutter程序

import 'package:flutter/material.dart';

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

class HelloWorld extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "第一个Flutter应用",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("第一个Flutter应用"),
        ),
        body: new Center(
          child: new Text("Hello World!"),
        ),
      ),
    );
  }
}

思路：

我们首先创建一个HelloWorld类，让他继承自StatelessWidget(玄冥二老之一的widget)

StatelessWidget是我们开发Flutter中最核心的Widget,stateless意思为状态不可改变的Widget，我们常常用来写一些静态页面，也就是状态不需要改变的页面肯定继承它了，与之对应的就是状态可以改变的组件视图StatefullWidget,这两大组件是Flutter开发中玄冥二老。

在源码中是StatelessWidget是一个抽象类，子类继承的话必须实现方法bulid(),返回的是一个Widget对象，这完全符合开发思想，既然是不可改变的视图，那我们直接返回一个组件Widget即可(它总是显示该Widget)，其他的我们并不需要要关心，比如视图改变的情况...

ok,既然build()方法需要我们返回一个Widget，我们该返回哪一个？Flutter一切皆组件(所有的视图都是继承Widget)，是不是返回任意的widget就可以呢？显然并不是，这时我们需要返回一个MaterialApp，这是谷歌建议我们遵循Material的风格规范来编写界面，所以，界面上看到都是在MaterialApp中定义的。

MaterialApp是显示的核心类，其中常用的属性有：title和home,其中title是标题的意思，直接给一个字符串就好了。

title: 'helloWorld'

我们重点关心home属性,Ctrl+鼠标左键可以查看需要返回什么，What?，又是返回Widget?这里将返回一个非常重要的Widget———脚手架Widget,它才是真正是显示组件，其中定义appBar以及页面中显示什么，这里用到的属性标签：appBar和body

 home: Scaffold(
        appBar: new AppBar(
          title: new Text('TextWidget'),
        ),
        body: new Center(
          child: Text('HelloWorld'),
        ),
      ),

其中，appBar里面又有很多属性，title表明appBar上显示的文本内容，当然还有其他属性

body表明页面主题将显示哪种视图，需要返回的依旧是Widget对象，这里Center组件表明，内容将显示在视图中心区域，然后又是嵌套，定义Center中的属性......

总结：
StatelessWidget、build()、MaterialApp->title->home、脚手架Scaffold、appBar、body、Center->child

1. 首先继承StatelessWidget抽象类，实现bulid方法
2. return一个MaterialApp
3. 定义App内的title,和home
4. home属性需要返回脚手架Scaffold组件
5. 脚手架定义appBar和body属性，appBar中定义text,body中创建Center
6. 在Center居中组件中，利用child属性，返回一个TextWidget，用来显示内容

TextWidget

作用：显示一段文本在界面上，类似于Android中的TextView控件
TextWidget常用属性有：

• TextAlig:文本对齐属性
• maxLines：最大显示行数
• overflow：控制文本溢出效果

如何控制字体大小，样式？textWidget为我们提供了style标签来控制

style: TextStyle(
        fontSize: 20.0,
        color:Color.fromARGB(255, 255, 150, 150),
        decorationStyle: TextDecorationStyle.solid,
        decoration: TextDecoration.underline
        ),

ContainerWidget容器

作用:可以用来放置多个子组件，类似于Android中的布局Layout,可以对子元素进行布局操作。

常用属性：

• alignment：子控件对齐方式，例如：顶部居中alignment: Alignment.topCenter
• width:控件的宽
• height: 控件的高
• color:控件的背景样色 例如color: Colors.blue,
• padding:内间距
• margin：外间距
• decoration:设置容器边框

new Container(
            child: new Text('Hello World',
            style: TextStyle(fontSize: 40),
            ),
            alignment: Alignment.center,
            width: 200.0,
            height: 400.0,
            color: Colors.blue,
            padding: EdgeInsets.all(50) ,
            margin: EdgeInsets.all(50),
          ),

图片组件ImageWidget

图片的显示是任何一个应用不可或缺的一部分，图片比文字更有吸引力，Flutter也为我们提供了非常方便快捷的api。

图片的获取途径？

• Image asset:加载本地图片资源，会使打包体积变大
• Image.network:网络资源图片，需要经常更换或者需要动态显示的图片
• Image file：本地图片，例如：相机中的图片...
• Image memory:加载到内存中的图片,Uint8List,不常用

这里我们介绍一下常用的网络图片加载：

代码演示

child: new Image.network(
            'https://img3.mukewang.com/5c1677390001169809600960-140-140.jpg',
            scale: 1.5,
            fit: BoxFit.fill,
          ),

直接new 一个Image.network即可，默认需要一个url属性值即可加载图片
常用属性值：

• scale： 图片的缩放
• fit: 相对于父容器，图片拉伸或填充

列表组件ListView

列表组件是我们开发中用的最多的组件之一，Flutter为我们提供了非常方便的Api调用，我们并不需要关系性能问题，直接使用即可。
这里我们演示一个简单的例子：

new ListView(
          children: [
            new ListTile(
              leading: new Icon(Icons.access_time),
              title: new Text('你好'),
            ),
            new Image.network("https://img3.mukewang.com/5c1677390001169809600960-140-140.jpg"),
            new Image.network("https://img3.mukewang.com/5c1677390001169809600960-140-140.jpg"),
            new Image.network("https://img3.mukewang.com/5c1677390001169809600960-140-140.jpg"),
          ],
        )

new出一个ListView组件后，利用child属性，返回一个Widget数组，数组中的组件将是ListView的数据源，我们可以随意添加Widget,图片文字都可以。

为了方便每个Widget的组合，我们可以使用ListTile这个组件，他是ListView的小瓦片，相当于每一个Item，我，额可以再这个组件中组合图片或者文字，这样每一个listItem就是一个图片和文字的组合了。

1.ListView动态(通过传参的方式)

刚刚只是一个list静态列表，数据都是写死的，我们现在来做一个动态的列表，也就是说数据是不确定的，由服务端或者后端传递过来的，我们得到数据然后传递到列表当中进行显示，这就涉及到数据的传递知识，属于Dart的基础知识，我们一起来了解一下。

构造器：我们知道在初始化一个类的时候，默认是调用无参的构造器，当然我们也可以手动添加有参数的构造器，可以在初始化的时候可以传参，所以我们在构造器中声明形参来接收传递过来的参数，下面来看实例:

void main() => runApp(
    //这里在初始化对象时，传递了一个参数
  new ListViews(items: new List.generate(1000, (i) => "Item $i")));
  
  class ListViews extends StatelessWidget {
  
  final List items;

  //构造器接收参数
  ListViews({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "dad",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('ListView'),
        ),
        body: new ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return new ListTile(title: new Text('${items[index]}'));
            }),
      ),
    );
  }
}

可以看到，我们在new的时候，传递了一个List对象给构造器，通过List的generate方法快速生成一个1000大小的列表。
然后在类的构造器中去接收到这个List参数，然后给类的ListView组件使用，达到动态数据，list的数据源是由外部接受的的，这样我们的ListView数据将会非常灵活。

2.横向列表的使用

横向列表顾名思义就是，可以通过水平方向进行一个列表的滑动，左右滑动列表Item，即可浏览ListView的数据了。

scrollDirection属性的使用

• Axis.vertical:垂直方向
• Axis.horizontal 水平方向

非常简单，我们直接修改属性值就可以完成不同方向的ListView
附上完整代码：

import 'package:flutter/material.dart';

void main() => runApp(new HorizontalList());

class HorizontalList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('横向list'),
        ),
        body: new Center(
          child: new Container(
            height: 200.0,
            child: new MyList()
          ),
        ),
      ),
    );
  }
}

//简化代码 提取出来单独
class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new ListView(
      scrollDirection: Axis.horizontal,
      children: [
        new Container(
          width: 180.0,
          color: Colors.amber,
        ),
        new Container(
          width: 180.0,
          color: Colors.cyanAccent,
        ),new Container(
          width: 180.0,
          color: Colors.deepOrange,
        ),new Container(
          width: 180.0,
          color: Colors.amber,
        ),new Container(
          width: 180.0,
          color: Colors.lightBlue,
        ),
      ],
    );
  }
}