Flutter初探

flutter-widgets.png

一、MaterialApp(App素材)

home属性（主界面）

需要一个Widget	作为主一个程序的入口
Scaffold小部件	1. 带有导航栏（appBar）的小部件 2.导航栏可以设置文字、颜色。而且可以自动以Widget（自定义导航栏）
body属性	显示在导航栏下面的区域，类似iOS中ViewController中的self.view

import 'package:flutter/material.dart'; // flutter素材，类似iOSUIKit
import 'model/car.dart';

void main() {
  runApp(
    App()
  );
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        leading: const IconButton(
          icon: Icon(Icons.restaurant_menu),
          tooltip: 'ceshi',
          onPressed: null,

        ),
        title: const Text('Flutter Title'),
      ),
      body:const Center(
        child: Text(
          'hello flutter',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 40.0,
            fontWeight: FontWeight.bold,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

上面代码运行如下：

二、Widget介绍

创建一个最小的 Flutter 应用简单到仅需调用 runApp() 方法并传入一个 widget 即可

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

1. Flutter伊始，万物皆Widget；

• Widget是什么？
  a. Widget类比iOS中的UIView，但Widget 拥有着不同的生命周期：整个生命周期内它是不可变的，且只能够存活到被修改的时候。
  b. 一旦 Widget 实例或者它的状态发生了改变， Flutter 框架就会创建一个新的由 Widget 实例构造而成的树状结构。而在 iOS 里，修改一个视图并不会导致它重新创建实例，它作为一个可变对象，只会绘制一次，只有在发生 setNeedsDisplay() 调用之后才会发生重绘。

• Widget的特性
  a. Flutter 的 Widget是很轻量的，一部分原因就是源于它的不可变特性。因为它并不是视图，也不直接绘制任何内容，而是作为对 UI 及其特性的一种描述，而被“注入”到视图中去。可以把它理解为“声明和构造 UI 的方法”。
  b. 自定义一个Widget要能够被渲染，需要实现 - build方法

• Widget的分类

  • 有状态：statefulWiget
    widget 在 build 方法之外（比如运行时下发生用户点击事件）需要被修改，那么就应该是有状态的。访问数据在state里边，通过setState设置/改变数据
  • 无状态：statelessWidget
    widget 一旦生成就不再发生改变，那么它就是无状态的

• StatefulWidget 和 StatelessWidget 的区别
  StatefulWidget 中有一个 State 对象，它用来存储一些状态的信息，并在整个生命周期内保持不变。总之，如果一个 WidgeT 在 build方法之外（比如运行时下发生用户点击事件）被修改，那么就应该是有状态的。如果一个 widget 一旦生成就不再发生改变，那么它就是无状态的。

• 常用的基础Widget

Text	Text widget 可以用来在应用内创建带样式的文本。
Row, Column	这两个 flex widgets 可以让你在水平 (Row) 和垂直(Column) 方向创建灵活的布局。它是基于 web 的 flexbox 布局模型设计的。
Stack	Stack widget 不是线性（水平或垂直）定位的，而是按照绘制顺序将 widget 堆叠在一起。你可以用 Positioned widget 作为Stack 的子 widget，以相对于 Stack 的上，右，下，左来定位它们。 Stack 是基于 Web 中的绝对位置布局模型设计的。
Container	Container widget 可以用来创建一个可见的矩形元素。 Container 可以使用 BoxDecoration 来进行装饰，如背景，边框，或阴影等。 Container 还可以设置外边距、内边距和尺寸的约束条件等。另外，Container可以使用矩阵在三维空间进行转换。
GridView	将 widget 展示为一个可滚动的网格。
ListView	将 widget 展示为一个可滚动的列表。
Card	将相关信息整理到一个有圆角和阴影的盒子中。
ListTile	将最多三行的文本、可选的导语以及后面的图标组织在一行中。

特别说明下stack以及和其常搭配在一块的小部件；

Stack

• Stack是多层布局
• 它的主轴方向是从内向外
• alignment属性：（用来定位）
  • Alignment(x, y) ，x和y的取值范围-1.0~1.0
  • x=0, y=0为中心
• Positioned小部件
  • left、top、right、bottom4个属性定位
  • 参数是像素位置
• AspectRatio 宽高比小部件
  • 它的设置影响父布局
  • sepectRatio属性：宽高比
  • 当父布局同时有宽度和高度，那么宽高比失效

三、布局

每一个U部件都可以看成一个矩形的“盒子”，每个“盒子”都有外边距Margin和内边距Padding。

主轴：MainAxisAlignment

MainAxisAlignment	布局样式
start 向主轴开始的方向对齐
center 主轴方向居中对齐
end 向主轴结束的方向对齐
spaceBetween 剩下的空间平均分布到小部件之间
spaceAround 剩下的空间平均分布到小部件周围
spaceEvenly 剩下的空间和小部件一起平均分

交叉轴：CrossAxisAlignment 垂直于主轴方向

CrossAxisAlignment	布局样式
baseline 文字底部对齐
center 交叉轴方向居中对齐
end 向交叉轴结束的方向对齐
start 向交叉轴开始的方向对齐
stretch 填满交叉轴方向

Expanded填充布局

• 在主轴方向不会盛夏间隙，将被Expanded白装的部件进行
  拉伸和压缩；
• 主轴横向，宽度设置没有意义；
• 主轴纵向，高度设置没有意义；
• 当Text被Expanded包装后，文字可以自动换行。这也被称作灵活布局。