原作者：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
- 首先继承StatelessWidget抽象类，实现bulid方法
- return一个MaterialApp
- 定义App内的title,和home
- home属性需要返回脚手架Scaffold组件
- 脚手架定义appBar和body属性，appBar中定义text,body中创建Center
- 在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: <Widget>[
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<String>.generate(1000, (i) => "Item $i")));
class ListViews extends StatelessWidget {
final List<String> 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: <Widget>[
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,
),
],
);
}
}
网友评论