Flutter Widget控件
widget的中文称：小部件
从flutter的架构图中可以看出来widget是整个视图描述的基础。Flutter的核心设计思想便是一切为Widget。在flutter的世界里，包括views，view，controller是，layouts等在内的观念都建立在Widget之上。widget是flutter功能的抽象描述。
需要学习Flutter就需要从Widget开始。
Flutter主要提供UI控制布局的基础知识，首先列出UI开发最为常用，最为基础的组件。
1.组件
1.1 Text
Text几乎是UI开发中最为重要的组件之一了，UI上面文字的展示基本上都要靠Text组件来完成。Flutter提供了原生的Text组件。Text的配置属性是丰富的，属性主要分为两部分一个是对齐&显示控制相关的在Text类的属性中，另一类是样式相关的属性使用单独的类TextStyle进行控制。跟native控件相比（以android为列），Text的组件基本上提供了同等的能力，并且提供了更加丰富的样式装饰能力。
1.1.1 实践代码Text
text组件：
名称 |
功能 |
textAlign |
本文对齐方式(center居中，left左对齐，right右对齐，justfy两端对齐) |
textDirection |
文本方向(ltr从左至右，rtl从右至左) |
overflow |
文本超出屏幕之后的处理方式(clip裁剪，fade渐隐，eliipsis省略号) |
textScaleFactor |
字体显示倍率 |
maxLines |
文字显示最大行数 |
style |
字体的样式设置 |
TextStyle的参数:
名称 |
功能 |
decoration |
文字装饰线(none没有线，lineThroungh删除线，overline上划线，underline下划线) |
decorationColor |
文字服饰线颜色 |
decorationStyle |
文字服饰风格([dashed,dotted])虚线，double两根线，solid一根实线，wavy波浪线 |
wordSpacing |
单词间隙(如果是负值，会让单词变得更经凑) |
letterSpacing |
字母间隙(如果是负值，会让字母变得更紧凑) |
fontStyle |
文字样式(italic斜体，normal正常体) |
fontSize |
文字大小 |
color |
文字颜色 |
fontWeight |
文字粗细(bold粗体，normal正常体) |
设置文字，文字大小，颜色，行数限制，文本对齐
child: Text(
"Flutter",//文本
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.yellow,//文字颜色
fontSize: 140,//文字大小
),运行效果
1.1.2 居中布局Center
Center继承自Align，只不过是将alignment设置为Alignment.center，其他属性列如widthFactor，heightFactor，布局行为，都与Align完全一样，在这里就不在单独做介绍了。Center源码如下，没有设置alignment属性，是因为Align默认的对齐方式就是居中。
源码
class Center extends Align {//源码
/// Creates a widget that centers its child.
const Center({ Key key, double widthFactor, double heightFactor, Widget child })
: super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}代码：
return Center(
child:Text(
"Center Text", //内容
style: TextStyle( //样式
fontSize: 20,
),
),
);运行效果：
1.1.3 MaterialApp
MaterialApp是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget,从源码可以看出该widget的构造方法中有多个参数，但是基本上大多数参数是可以省略的。
MaterialApp({
Key key,
this.title = '', // 设备用于为用户识别应用程序的单行描述
this.home, // 应用程序默认路由的小部件,用来定义当前应用打开的时候，所显示的界面
this.color, // 在操作系统界面中应用程序使用的主色。
this.theme, // 应用程序小部件使用的颜色。
this.routes = const <String, WidgetBuilder>{}, // 应用程序的顶级路由表
this.navigatorKey, // 在构建导航器时使用的键。
this.initialRoute, // 如果构建了导航器，则显示的第一个路由的名称
this.onGenerateRoute, // 应用程序导航到指定路由时使用的路由生成器回调
this.onUnknownRoute, // 当 onGenerateRoute 无法生成路由(initialRoute除外)时调用
this.navigatorObservers = const <NavigatorObserver>[], // 为该应用程序创建的导航器的观察者列表
this.builder, // 用于在导航器上面插入小部件，但在由WidgetsApp小部件创建的其他小部件下面插入小部件，或用于完全替换导航器
this.onGenerateTitle, // 如果非空，则调用此回调函数来生成应用程序的标题字符串，否则使用标题。
this.locale, // 此应用程序本地化小部件的初始区域设置基于此值。
this.localizationsDelegates, // 这个应用程序本地化小部件的委托。
this.localeListResolutionCallback, // 这个回调负责在应用程序启动时以及用户更改设备的区域设置时选择应用程序的区域设置。
this.localeResolutionCallback, //
this.supportedLocales = const <Locale>[Locale('en', 'US')], // 此应用程序已本地化的地区列表
this.debugShowMaterialGrid = false, // 打开绘制基线网格材质应用程序的网格纸覆盖
this.showPerformanceOverlay = false, // 打开性能叠加
this.checkerboardRasterCacheImages = false, // 打开栅格缓存图像的棋盘格
this.checkerboardOffscreenLayers = false, // 打开渲染到屏幕外位图的图层的棋盘格
this.showSemanticsDebugger = false, // 打开显示框架报告的可访问性信息的覆盖
this.debugShowCheckedModeBanner = true, // 在选中模式下打开一个小的“DEBUG”横幅，表示应用程序处于选中模式
})有Dart基础知识可以清楚看出，MaterialApp的构造方法中的每一个参数是可以省略的，但是官方还是要去[home]，[rootes][onGenerateRoute]这三个参数至少要填写一个。如果只给出路由，必须包括Navigator.defaultRouteName(/)条目，因为当应用程序以指定不受支持的路由的意图启动时，将使用该条目
基本案例：
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
//home: HomeContent(),
home: Scaffold(
appBar: AppBar(
title: Text("Flutter ...."),
),
body: HomeContent(),
),
theme: ThemeData(
primaryColor: Colors.yellow
),
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child:Text(
"Center Text",
style: TextStyle(
fontSize: 20,
),
),
);
}
}在Dart2后我们可以在创建对象的时候省略new和const。例如Center()等同于new Center()
在上面的例子中我们传入了home参数自定义了一个继承与StatelessWidget的组件MyApp,MyApp的build方法返回一个Scaffold组件。运行效果：
比如我们现在app默认主题颜色太丑了，如果想改成黑色，怎么办能？
其实很简单，只要我们改变MaterialApp中theme参考就行了。
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
//home: HomeContent(),
home: Scaffold(
appBar: AppBar(
title: Text("MaterialApp ...."),
),
body: HomeContent(),
),
theme: ThemeData(
primaryColor: Colors.black
),
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child:Text(
"MaterialApp",
style: TextStyle(
fontSize: 20,
),
),
);
}
}运行效果：
1.1.4 Scaffold
Scaffold翻译过来就是脚手架的意思，它实现了基本的Material Design可视化布局结构。此类提供了用于显示drawer，snackbar和底部sheet的API。简单的说，Scaffold就是一个提供Material Design设计中基本布局的widget。
const Scaffold({
Key key,
this.appBar, // 标题栏
this.body, // 用于显示当前界面主要内容的Widget
this.floatingActionButton, // 一个悬浮在body上的按钮，默认显示在右下角
this.floatingActionButtonLocation, // 用于设置floatingActionButton显示的位置
this.floatingActionButtonAnimator, // floatingActionButton移动到一个新的位置时的动画
this.persistentFooterButtons, // 多状态按钮
this.drawer, // 左侧的抽屉菜单
this.endDrawer, // 右'侧的抽屉菜单
this.bottomNavigationBar, // 底部导航栏。
this.bottomSheet, // 显示在底部的工具栏
this.backgroundColor, // 内容的背景颜色
this.resizeToAvoidBottomPadding = true, // 控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容。
this.primary = true, // Scaffold是否显示在页面的顶部
})在Flutter 入门--MaterialApp 中我们仅仅用到了Scaffold的appBar和body参数，我们来看看其他参数的作用。
其实很简单，只要新增一个参数就可以了
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ScaffoldHome(),
);
}
}
class ScaffoldHome extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( //标题
title: Text("Flutter AppBar ..."),
),
body: Center( //中心控件
child: Text("Scaffold Test"),
),
);
}
}运行效果：
floatingActionButton 属性
floatingActionButton表示按钮，floatingActionButton也有很多参数，但是基本上大多都是可以省略的，只是onPressed必须的，需要注意的是当onPressed传入的是null的时候表示按钮时被禁用的。
coding
class ScaffoldHome extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( //标题
title: Text("Flutter AppBar ..."),
),
body: Center( //中心控件
child: Text("Scaffold Test"),
),
floatingActionButton: FloatingActionButton(//一个悬浮在body上的按钮，默认显示在右下角
onPressed: (){},
child: Text("点击"),
),
);
}
}运行效果
deawer 属性
添加Drawer控件后，程序会默认在标题栏上添加一个图标按钮。
也可以通过左滑 的方式换出Drawer控件
class ScaffoldHome extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( //标题
title: Text("Flutter AppBar ..."),
),
body: Center( //中心控件
child: Text("Scaffold Test"),
),
floatingActionButton: FloatingActionButton(
onPressed: (){},
child: Text("点击"),
),
drawer: Drawer(//左侧的抽哲菜单
child: Center(
child: Text("Drawer属性"),
),
),
);
}
}运行效果：
1.2 Container 容器
Flutter Container组件
名称 |
功能 |
alignment |
topCenter：顶部居中对齐 topLeft:顶部左对齐 topRight:顶部右对齐 center:水平垂直居中对齐 centerLeft ：垂直居中水平居左对齐 centerRight：垂直居中水平居右对齐 bottomCenter : 底部居中对齐 bottomLeft：底部居左对齐 bottomRight：底部居右对齐 |
decoration |
边框 |
margin |
margin属性是表示Container与外部其他组件的距离。EdgeInsets.all(20.0) |
padding |
padding就是Container的内边距，指Container边缘与Child之间的距离padding:EdgeInsets.all(10.0) |
transform |
让Container容易进行一些旋转之类的transform:Matrix4.rotationZ（0.2） |
height |
容器高度 |
width |
容器宽度 |
child |
容器子元素 |
Container非常常见，下面举例。
Container在Flutter中太常见了，官方给出的简介，是一个结合了绘制（painting），定位(positioning)以及尺寸(sizing)
可以得出几个信息，它是一个组合的widget，内部有绘制widget，定位widge ，尺寸widget。后续可以看到不少的widget，都是通过一些更基础的widget组合而成的
Container的组成如下:
- child元素；
- child元素首先会被padding抱着；
- 然后添加额外的constraints限制；
- 最后添加margin
Container的绘制的过程如下：
- 首先会绘制transform效果；
- 接着绘制decoration；
- 然后绘制child；
- 最后绘制foregroundDecoration；
Container自身尺寸的调节分两种情况
- Container在没有子节点(children)的时候，会试图去变得足够大。除非constraints是unbounded限制，在这种情况下，Container会试图去变得足够小。
- 带子节点的Container，会根据子节点尺寸调节自身尺寸，但是Container构造器中如果包含了width，height以及constraints，则会按照构造器中的参数来进行尺寸的调节
1.2.1 布局行为
由于Container组合了一系列的widget，这些widget都有自己的布局行为，因此Container的布局行为有时候是比较复杂的。
一般情况下，Container会遵循如下顺序去尝试布局：
- 对齐(alignment);
- 调节自身尺寸适合子节点；
- 采用width，height以及constraints布局；
- 扩展自身去适应父节点；
- 调节自身到足够小；
进一步说:
- 如果没有了节点，没有设置width，height以及constraints，并且父节点没有设置unbounded的限制，Container会将自身调整到足够小。
- 如果没有子节点，对齐方式(alignment)，但是提供了width，height或者constraints，那么Container会根据自身以及父节点的限制，将自身调节到足够小。
- 如果没有子节点，width，height，constraints以及alignment，但是父节点提供了bounded限制，那么Container会按照父节点的限制，将自身调整到足够大
- 如果有alignment，父节点提供了unbounded限制，那么Container将会调节自身尺寸来包住child:
- 如果有alignment，并且父节点提供了bounded限制，那么Container会将自身调整的足够大(在父节点的范围内)，然后将child根据alignment,Container会将父节点的constraints传递给child，并且根据child调整自身。
1.2.2 继承关系
Object > Diagnosticable > DiagnosticableTree > Widget >StatelessWidget > Container从继承关系可以看出，Container是一个StatelessWidget。Container并不是一个最基础的widget，他是由一系列的基础widget组合而成。
1.2.3 源码解析
构造器如下：
Container({
Key key, //Container唯一标识符，用于查找更新。
this.alignment, //控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式。
this.padding, //decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。
this.color, //用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。
this.decoration, //绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。
this.foregroundDecoration,//绘制在child前面的装饰。
double width, //container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局。
double height, //container的高度，设置为double.infinity可以强制在高度上撑满。
BoxConstraints constraints,//添加到child上额外的约束条件。
this.margin, //围绕在decoration和child之外的空白区域，不属于内容区域。
this.transform, //设置container的变换矩阵，类型为Matrix4。
this.child, //container中的内容widget。
this.clipBehavior = Clip.none,
})平时使用最多的，也就是padding，color，width，height，margin属性
举个例子：
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Center(
child: Text(
"textView",
style: TextStyle(
fontSize: 20,
color: Colors.yellow
),
),
),
color: Colors.black12,
width: 200,
height: 200,
);
}
}实际运行效果
