版权声明：本文为作者原创书籍。转载请注明作者和出处，未经授权，严禁私自转载，侵权必究！！！
情感语录：欢乐就是坚强的发条，使永恒的自然循环不息。在世界的大钟里面，欢乐是推动齿轮的动力
大家好，欢迎来到Flutter专栏。你可能不会移动端开发，无论会与不会都没关系，Flutter专栏将带你走进双移动端的领域。或许你两端原生开发都会，也会面对写两套原生代码的问题，就算能力足够，可能留给你的时间也不够。能不能一套代码多平台使用呢？当然可以啦！！ Google 公司的一伟大创举Flutter就诞生了，Flutter当前正火，在短短的时间内可以说是步步逼近 React Native，虽然在学习成本上 Flutter 远高 RN（当然看你目前是否掌握相应的语言基础），但在性能上是略胜一筹，它和原生基本无异。Flutter是以后的一个发展方向，为了更好的拥抱未来，所以学习Flutter很有必要，要学好Flutter你得先掌握Dart语言，如果你没有Dart语言基础请先观看我上期内容： 戳这里☞《 Flutter大战前夜之Dart语言（上）》； 《Flutter大战前夜之Dart语言（下）》) 两篇文章带你轻松入门 Dart 语言基础。
本章简要：
1、Center 居中容器组件
2、Text 文本组件
3、Container 容器组件
4、MaterialApp 和 Scaffold 主题组件
5、简单的自定组件Widget
有关Flutter在 Windows 和 Mac 平台的环境搭建介绍：
英文版地址：https://flutter.dev/docs/get-started/install
一、Flutter 目录结构介绍
使用你的IDE创建一个Flutter默认工程，我这里使用的Android Studio，其他开发工具也是一样，结构如下。
image.png
我们着重需要注意一下几个文件夹,其他的暂时不用理会
文件夹 作用
android android 平台相关代码
ios ios 平台相关代码
lib flutter 相关代码，主要编写的代码就在这个文件夹
test 用于存放测试代码
pubspec.yaml 配置文件，一般存放一些第三方库的依赖。
【温馨小贴士】 Flutter程序是可以支持 Android 的一级语言Kotlin 和 IOS 的Swift语言，如果需要原生语言的支持请在创建项目的时候进行勾选配置。
默认工程代码，去掉注释大致如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
从上面demo代码来看，可能有点懵，看不懂没关系，下面分别一点点来介绍。
二、Flutter 入口文件、入口方法
每一个 flutter 项目的 lib 目录里面都有一个 main.dart 文； 它就是 flutter 的入口文件
void main(){
runApp(MyApp());
}
//也可以简写
void main()=>runApp(MyApp());
其中的 main 方法是 dart 的入口方法。runApp 方法是 flutter 的入口方法。MyApp 是自定义的一个组件,关键字 new 可以不写，写成 new MyApp()也没有错，在开发中常常不写，当然这也看你个人习惯。
三、组件
Flutter的视图都是通过组件绘制的，没有像Android 原生开发中那样可以通过xml文件进行视图绘制，习惯了Android 开发的同学对于这点来说可能很难适应。
1、Center组件：
你可以看着是一个窗口视图，或者说就是当前屏幕,当然这是取决于父容器的作用范围，和自身的大小，该组件顾名思义就是将子组件放置在自己的中心位置。
2、Text组件：
这就是一个文本组件，用于显示文本信息，在Android原生中它相当于充当TextView控件一样的效果。
下面我们来看一个例子：
import 'package:flutter/material.dart';
void main(){
runApp(Center( child: Text(
"我是一个文本内容", textDirection: TextDirection.ltr, //让文字从左向右流动
),
));
}
效果如下：
Text组件.png
此时的Center组件你可以看做就是整个屏幕，而屏幕中间放了一个文本组件Text来显示我们的内容。
3、自定义组件：
自定义组件如同原生开发中一样继承View或者ViewGroup类去实现你自己想要的界面，在 Flutter 中自定义组件其实也是一个类，这个类需要继承 StatelessWidget 或 StatefulWidget。 前期我们都继承 StatelessWidget。后面会讲到StatefulWidget 的使用。
【StatelessWidget 与 StatefulWidget 二者大致区分】：
StatelessWidget 是无状态组件，状态不可变的 widget
StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变
下面我们来简化下runApp 并给Text组件加点样式
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Text(
"中文，是世界上最美的语言",
textDirection: TextDirection.ltr, //让文字从左向右流动
//添加样式
style: TextStyle(
fontSize: 40.0, //设置40号字体
fontWeight: FontWeight.bold, //加粗
//设置字体颜色的三种方式
// color: Colors.yellow
//color: Color.fromRGBO(255, 222, 222, 0.5)
color:Color.fromARGB(22, 255, 118, 18)
),
),
);
}
}
运行起来屏幕会上显示我们添加了点文字效果。需要注意的是Flutter中的这些样式都是通过命名函数进行配置的，在写的时候,一定的和函数中的名称一致，不然会报错。
4、MaterialApp 和 Scaffold 组件
① 、MaterialApp组件
MaterialApp 是一个方便的 Widget，它封装了应用程序实现 Material Design 所需要的一些 Widget。一般作为顶层 widget 使用，常用属性如下：
home（主页）
title（标题）
color（颜色）
theme（主题）
routes（路由）
②、Scaffold
Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet 的 API。
Scaffold 有下面几个主要属性：
appBar - 显示在界面顶部的一个 AppBar。
body - 当前界面所显示的主要内容 Widget。
drawer - 抽屉菜单控件。
从上面的实例呆萌来看一点都不美观，这里介绍了MaterialApp 和 Scaffold 两个组件，我们可以轻松实现像Android 原生开发中带有一个主题和ActionBar的样式，当然这两个组件的用法不止下面这么简单，更多的使用会在后面的章节实战中慢慢拓展。
import 'package:flutter/material.dart';
//dart程序入口
void main(){
//flutter 程序入口
runApp(MyApp());
}
//自定义组件
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
//设置标题栏
appBar:AppBar(
title:Text('呆萌')
),
//设置内容区域
body:Content(),
),
//设置主题色
theme: ThemeData(
primarySwatch: Colors.yellow
),
);
}
}
//自定义的内容
class Content extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Text(
"中文，是世界上最美的语言",
textDirection: TextDirection.ltr,////让文字从左向右流动
style: TextStyle(
fontSize: 40.0, //设置40号字体
color: Colors.yellow, // 设置字体颜色
),
)
);
}
}
这样基本实现了我们原生开发中构建默认空工程效果样子，结果大致如下：
image.png
大致了解Text组件和Container组件的使用，下面来详细介绍下这两个组件中常用的属性,当然这里并未完全列举出来，这里只是开发中常用的而已，更多信息需要自己参看源码或者官方文档 戳这里 （Text组件） ；戳这里 （Container组件）
一、Text组件:
名称 功能
textAlign 本对齐方式（center 居中，left 左
对齐，right 右对齐，justfy 两端对齐）
textDirection 文本方向（ltr 从左至右，rtl 从右至左）
overflow 文字超出屏幕之后的处理方式（clip
裁剪，fade渐隐，ellipsis省略号）
textScaleFactor 字体显示倍率
maxLines 文字显示最大行数
style 字体的样式设置
下面是TextStyle的参数：
名称 功能
decoration 文字装饰线（none 没有线，lineThrough 删
除线，overline 上划线，underline 下划线）
decorationColor 文字装饰线颜色
decorationStyle 文字装饰线风格（[dashed,dotted]虚线，
double 两根线，solid 一根实线，wavy 波浪
线）
wordSpacing 单词间隙（如果是负值，会让单词变得更紧凑)
letterSpacing 字母间隙（如果是负值，会让字母变得更紧凑）
fontStyle 文字样式（italic 斜体，normal 正常体）
fontSize 文字大小
color 文字颜色
fontWeight 字体粗细（bold 粗体，normal 正常体）
二、Container组件
名称 功能
alignment topCenter：顶部居中对齐
topLeft：顶部左对齐
topRight：顶部右对齐
center：水平垂直居中对齐
centerLeft：垂直居中水平居左对齐
centerRight：垂直居中水平居右对齐
bottomCenter 底部居中对齐
bottomLeft：底部居左对齐
bottomRight：底部居右对齐
decoration decoration:BoxDecoration( //设置容器样式
color: Colors.blue, //Container的整体背景颜色
border: Border.all( //设置边框颜色和宽度
color: Colors.red,
width: 2.0,
),
borderRadius BorderRadius.all(//设置边框四边都圆角
Radius.circular(8.0)
)
)
margin margin 属性是表示Container与外部其他组件的距离。
padding padding 就是内边距，指Container 边缘与Child之间的距离
transform 让 Container进行一些位移旋转之类
height 容器高度
width 容器宽度
child 容器子元素
四、本章实战
要求：在屏幕中心绘制一个正方形且让四边角进行10个单位的圆角，在中心区域显示一段文字，且配置些样式，如颜色,字体大小和文本穿轴线等。
import 'package:flutter/material.dart';
//dart入口
void main(){
//flutter 入口
runApp(MyApp());
}
//自定义组件
class MyApp extends StatelessWidget{
//实现抽象方法
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
//导航栏 可以理解是原生中的ActionBar
appBar: AppBar(
// 设置ActionBar 标题
title:Text("呆萌")
),
// 内容区域
body:HomeContent()
)
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
// 此时的Center 就是整个屏幕除去状态栏和appbar的区域
return Center(
//在Center区域创建一个容器 宽高300
child: Container(
height: 300.0,
width: 300.0,
//设置容器样式
decoration: BoxDecoration(
//Container的整体背景颜色
color: Colors.yellow,
//设置边框颜色和宽度
border: Border.all(
color: Colors.blue,
width: 2.0
),
//设置边框四边都圆角10个单位
borderRadius: BorderRadius.all(
Radius.circular(10),
)
),
//设置内边距 左上右下都为20
padding:EdgeInsets.all(20),
//设置外边距 左上右下
margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
//按x轴位移100个单位
// transform:Matrix4.translationValues(100,0,0),
//按z轴旋转百分之30
// transform:Matrix4.rotationZ(0.3),
//将X对角线提示到1.2倍长度,既高度不变，宽度会被拉伸
// transform:Matrix4.diagonal3Values(1.2, 1, 1),
//设置子元素的对齐方式 居中，既Container 区域中部
alignment: Alignment.center,
//添加一个子元素
child: Text(
//设置文本内容
'全世界都在说中国话，孔夫子的话越来越国际化',
// 设置文字左对齐
textAlign:TextAlign.left,
//文本超出长度 后...显示方法,需要结合 maxLines使用
overflow:TextOverflow.ellipsis ,
// 最大显示行数
maxLines: 2,
//字体显示倍率
textScaleFactor: 1.2,
//设置文本样式
style:TextStyle(
//16号字体
fontSize: 15.0,
//文字红色
color:Colors.red,
fontWeight: FontWeight.w800,
//斜体
fontStyle: FontStyle.italic,
//穿轴线
decoration:TextDecoration.lineThrough,
//穿轴线显色
decorationColor:Colors.black,
//穿轴线为虚线
decorationStyle: TextDecorationStyle.dashed,
//字母间隙（如果是负值，会让字母变得更紧凑）
letterSpacing: 5.0
)
),
),
);
}
}
代码中的备注已经有了详细介绍，这里就不在描述了，大致效果如下：
image.png
温馨提示：常用开发指令：
通过命令行 执行flutter run
R 键：点击后热加载，也就算是重新加载吧。
P 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
O 键：切换android和ios的预览模式。
Q 键：退出调试预览模式。
【讨论：】在Android原生开发中这么一个界面只需要在xml布局文件就能很轻松实现，但在Flutter 却要写这么大一堆代码，那么你更喜欢那种方式呢？抛开Flutter能生产IOS应用外，你觉得Flutter中这样的做法到底有什么好处呢？
开篇文章内容并不复杂也没有太多可讲的内容，只是简单入门了解，学习时参照上面案例进行多加练习下即可。本章内容到此就结束了，如有不正欢迎留言指正，如果喜欢可以留下你的小红心！O(∩_∩)O 谢谢大家的观看，下章再会！！
网友评论