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 一旦生成就不再发生改变，那么它就是无状态的
- 有状态：statefulWiget
-
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包装后，文字可以自动换行。这也被称作灵活布局。
网友评论