# TextWidget文本组件
Flutter一切皆组件
## TextWidget常用属性
1. textAlign（TextAlign）：文本对齐属性（注意：若多行，则左中右都可，若单行，只靠左）
2. textDirection（TextDirection）：文本方向 123 56=》65 123
2. maxLines（init）：文本显示的最大行数
3. overflow（TextOverflow）：控制文本的溢出效果
4. style（TextStyle）：
**style（TextStyle）**：
文字样式设计，主要有：
fontSize(double):字体大小
color(Color,Colors):字体颜色
fontWeight(FontWeight)：加粗
fontStyle（FontStyle）：字体样式，斜体
decoration(TextDecoration): 文字装饰，比如下划线，中划线
decorationColor(Color,Colors):文字装饰的颜色
decorationStyle(TextDecorationStyle):文字装饰线条类型
decorationThickness(double):文字装饰线条宽度
letterSpacing():字间距（英文指每个字母之间，中文指每个字体之间）
backgroundColor(Color,Colors):字体背景颜色，
wordSpacing：字体间距离（英文指每个单词间）
textBaseline:基线
shadows：绘制文字阴影
fontFamily：文字字体"Rock Salt"
height：好像是设置line-height的
~~~
child:Text(
'hello Flutter hello Flutter hello Flutter hello Flutter hello Flutter hello Flutter hello Flutter ',
textAlign: TextAlign.justify, //left end center justify start
// maxLines: 1,
// overflow: TextOverflow.ellipsis,//clip(默认值),ellipsis（超出文本显示省略号） fade(超出部分渐变)
style:TextStyle(
fontSize:25.0, //需要写.0的形式，否则报错 浮点型
color: Color.fromARGB(255, 255, 150, 150),//a 代表透明度(0-255)
decoration: TextDecoration.lineThrough, //lineThrough none overline underline
decorationStyle: TextDecorationStyle.dotted // 下划线样式 dashed dotted double solid
)
)
~~~
## Container容器组件（相当于div）
1. Alignment属性的使用
2. 设置宽高和颜色
~~~
body:Center(
child: Container(
child: new Text(
'Hello Flutter2',
style: TextStyle(
fontSize: 40.0,
)
),
// 9中对齐方式bottomCenter bottomLeft bottomRight
// center centerLeft centerRight topCenter topLeft topRight
alignment: Alignment.center,
width: 500.0,
height: 400.0,
color: Colors.lightBlue // color也是一个组件
)
)
~~~
1. Padding内边距属性的使用
2. margin外边距属性的使用
3. decoration属性制作彩色背景
### padding内边距属性
1. EdgeInsets.all()：统一设置
2. EdgeInsets.formLTRB(value1, value2, value3, value4)：即(left,top,right,bottom)
### decoration修饰器
1. 设置容器的边框
2. BoxDecoration Widget讲解
3. LinearGradient设置背景颜色渐变
~~~
child: Container(
child: new Text(
'Hello Flutter2',
style: TextStyle(
fontSize: 40.0,
)
),
// 9中对齐方式bottomCenter bottomLeft bottomRight
// center centerLeft centerRight topCenter topLeft topRight
alignment: Alignment.topLeft,
width: 500.0,
height: 400.0,
// color: Colors.lightBlue, // 渐变背景不能用color属性
//const EdgeInsets.all(20.0) all表示上下左右边距都一样
padding: const EdgeInsets.fromLTRB(10.0,30.0, 0.0, 0.0),
margin: const EdgeInsets.all(10.0),//外边距
decoration: new BoxDecoration(
gradient: const LinearGradient(
colors:[ //三种颜色的渐变
Colors.lightBlue,
Colors.greenAccent,
Colors.purple
]
)
),
)
)
~~~
## Image图片组件的使用
1. Image Widget的几种加入形式
2. Fit属性的详细讲解
3. 图片的混合模式
4. Repeat属性让图片重复
### Image Widget的几种加入形式
1. Image.asset：加载资源图片，会使打包时包体过大
2. Image.network：网络资源图片，经常换的或者动态的图片
3. Image.file：本地图片，比如相机照相后的图片预览
4. Image.memory：加载到内存中的图片，Uint8List(不常用)
~~~
child: Container(
//网络地址
child: Image.network(
'http://szimg.mukewang.com/5baf3f0a000180df06000338-360-202.jpg',
scale: 2,//flutter中的缩放和以前的缩放不太一样,值越大图片越小
//fill充满容器，以容器为主宰,不管图片是否拉伸
// contain 全图显示，显示原比例，显示图片最大模式，可能会有空隙，以容器为基础，最大显示图片,图片没有变形
// cover 可能被拉伸或裁切，图片要充满这个容器，不会有缝隙
// fitWidth宽度是充满的 fitHeight高度是充满的
//scaleDown 最不常用，要保持原图片大小，根据容器选择，除非图片大于容器有效果
// fit: BoxFit.contain,
//color: Colors.greenAccent,
//混合模式 darken colorBurn colorDodge difference dst exclusion
// colorBlendMode: BlendMode.colorDodge,
//重复模式 repeat noRepeat(不重复) repeat repeatX repeatY
repeat: ImageRepeat.repeat
),
width:300.0,
height: 300.0,
color:Colors.lightBlue
)
~~~
## ListView组件的使用（列表组件）
1. listView的基本语法
2. listTile的使用（列表中的一列，其他容器也可使用）
3. 做个图片列表
~~~
import 'package:flutter/material.dart';
//runApp中有一个最起码的组件Widget ,自己定义MyApp
void main() => runApp(MyApp());
//继承静态组件
class MyApp extends StatelessWidget{
//重写 build方法，返回Widget，build接收一个上下文参数 context
@override
Widget build(BuildContext context){
return MaterialApp(
title: 'Flutter demo',
//home表示手机页面的主体，需要一个脚手架Scaffold,它也是一个组件
home: Scaffold(
appBar: new AppBar(
title: new Text('ListView Widget')
),
body: new ListView(
// children是一个列表组件，返回的是一个数组
children: <Widget>[
// ListTile列表瓦片，列表用瓦片一层层盖住展示
/* new ListTile(
// leading：开始的位置
leading: new Icon(Icons.border_right),
title: new Text('border_right'),
),
new ListTile(
// leading：开始的位置
leading: new Icon(Icons.android),
title: new Text('android'),
),
new ListTile(
// leading：开始的位置
leading: new Icon(Icons.arrow_back_ios),
title: new Text('arrow_back_ios'),
), */
new Image.network('http://szimg.mukewang.com/5ac2dfe100014a9005400300-360-202.jpg'),
new Image.network('http://szimg.mukewang.com/5becd5ad0001b89306000338-360-202.jpg'),
new Image.network('http://szimg.mukewang.com/5c0886650001e7b106000338-360-202.jpg'),
new Image.network('http://szimg.mukewang.com/5baf3f0a000180df06000338-360-202.jpg'),
new Image.network('http://szimg.mukewang.com/5b17bad10001535305400300-360-202.jpg')
]
)
)
);
}
}
~~~
## 横向列表的使用
1. 制作
2. scrollDirection属性的讲解
3. 代码优化，自定义组件（目前嵌套非常多）
### scrollDirection属性讲解
1. Axis.horizontal：横向滚动（水平方法）
2. Axis.vertical:纵向
~~~
body: Center(
//child表示需要其他的子组件
child: Container(
height: 200.0,
//容器里的子组件
child: new ListView(
//方向
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width: 180.0,
color: Colors.lightBlue,
),
new Container(
width: 180.0,
color: Colors.lightGreen,
),
new Container(
width: 180.0,
color: Colors.amber,
),
new Container(
width: 180.0,
color: Colors.deepOrange,
),
],
),
),
)
~~~
问题：
列表嵌套太多
自定义组件
~~~
class MyList extends StatelessWidget{
@override
Widget build(BuildContext context){
return ListView(
//方向
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width: 180.0,
color: Colors.lightBlue,
),
new Container(
width: 180.0,
color: Colors.lightGreen,
),
new Container(
width: 180.0,
color: Colors.amber,
),
new Container(
width: 180.0,
color: Colors.deepOrange,
),
]
);
}
}
child: Container(
height: 200.0,
//容器里的子组件
child: new MyList(),
),
~~~
## 动态列表的使用
1. Dart中List类型的使用（数组）
2. 传递和接收参数，实现动态列表的基础
3. 动态列表案例制作
### Dart中List的使用
1. List，可理解为js中的数组
2. 声明List的四种声明方式
new List(), new List(3)//长度, new List<String>()//类型, [1,2,3,4]
### 参数的传递和接受
~~~
//runApp中有一个最起码的组件Widget ,自己定义MyApp
void main() => runApp(MyApp(
items: new List<String>.generate(1000, (i)=>"Item $i")//使用生成器
));
//继承静态组件
class MyApp extends StatelessWidget{
//声明变量
final List<String> items;
// 构造方法 key为默认的参数 @required表示必须传入的参数
// MyApp是继承的是无名参的 ，所以需要调用super方法
MyApp({Key key, @required this.items}):super(key:key);
//重写 build方法，返回Widget，build接收一个上下文参数 context
@override
Widget build(BuildContext context){
return MaterialApp(
title: 'Flutter demo',
//home表示手机页面的主体，需要一个脚手架Scaffold,它也是一个组件
home: Scaffold(
appBar: new AppBar(
title: new Text('ListView Widget')
),
// builder表示动态列表的意思
body: new ListView.builder(
//列表长度
itemCount: items.length,
// 列表实际显示的样子
itemBuilder: (context, index){
return new ListTile(
title: new Text('${items[index]}')
);
}
)
)
);
}
}
~~~
- 空白目录
- Flutter入门
- 课程简介
- 开发环境搭建
- 常用组件讲解
- 案例实战
- Dart编程语言入门
- 介绍和开发准备
- 数据类型
- 运算符
- 控制流语句
- 方法
- 面向对象1
- 面向对象2
- 枚举&类型
- Flutter中文网
- Widget框架总览
- 在Flutter中构建布局
- Flutter for Web开发者
- Flutter入门实战
- flutter介绍
- Flutter目录结构，各种组件
- Container、Text
- 图片组件Image
- ListView
- 动态组件
- GridView组件
- 页面布局Padding,Row,Column,Expanded，Icon
- Stack层叠组件，Align，Positioned
- AspectRatio，Cart
- wrap组件
- 组件汇总