Flutter中 Text 与 Container 组件
Flutter中 Text 与 Container 组件
1. Text组件
1. textAlign：文本对齐方式；
(1). center 居中；
(2). left 左 对齐；
(3). right 右对齐；
(4). justfy 两端对齐；
2. textDirection：文本方向；
(1). ltr 从左至右；
(2). rtl 从右至 左；
3. overflow：文字超出屏幕之后的处理方式；
(1). clip 裁剪；
(2). fade 渐隐；
(3). ellipsis 省略号；
4. textScaleFactor：字体显示倍率；
5. maxLines：文字显示最大行数；
6. style：字体的样式设置，值为TextStyle的类，其参数有：
(1). decoration 文字装饰线；
A. none 没有线；
B. lineThrough 删除线；
C. overline 上划线；
D. underline 下划线；
(2). decorationColor 文字装饰线颜色；
(3). decorationStyle 文字装饰线风格；
A. dashed 虚线；
B. dotted 虚线；
C. double 两根线；
D. solid 一根实线；
E. wavy 波浪 线；
(4). wordSpacing 单词间隙，如果是负值，会让单词变得更紧凑；
(5). letterSpacing 字母间隙，如果是负值，会让字母变得更紧凑；
(6). fontStyle 文字样式；
A. italic 斜体；
B. normal 正常体；
(7). fontSize 文字大小；
(8). color 文字颜色；
(9). fontWeight 字体粗细；
A. bold 粗体；
B. normal 正常体；
更多参数参考：
https://api.flutter.dev/flutter/painting/TextStyle-class.html
2. Container组件
1. alignment 内容对齐方式；
(1). topCenter：顶部居中对齐；
(2). topLeft：顶部左对齐；
(3). topRight：顶部右对齐；
(4). center：水平垂直居中对齐；
(5). centerLeft：垂直居中水平居左对齐 ；
(6). centerRight：垂直居中水平居右对齐 ；
(7). bottomCenter 底部居中对齐 ；
(8). bottomLeft：底部居左对齐 ；
(9). bottomRight：底部居右对齐；
2. decoration 装饰值为BoxDecoration的类，属性有：
(1). color: 颜色，值如：Colors.blue；
(2). border: 边框，值如：Border.all( color: Colors.red, width: 2.0, )；
(3). borderRadius: 倒圆色，值如：BorderRadius.all( Radius.circular(8.0) )；
3. margin 表示Container 与外部其他组件的距离，值如：EdgeInsets.all(20.0)；
4. padding 表示Container 边缘与 Child 之间的距离，值如：EdgeInsets.all(10.0)；
5. transform 让Container进行一些旋转与平移之类的操作，值如：Matrix4.rotationZ(0.2)；
6. height 容器高度；
7. width 容器宽度；
8. child 容器子元素；
3. 代码示例
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
// 自定义无状态组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title:Text('头部信息')
),
body:HomeContent(),
)
);
}
}
// 主体组件
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
// Container组件
child: Container(
// Text组件
child:Text(
'科技创新的星辰大海更让人心潮澎湃，这才是互联网科技巨头们应该有的担当',
textAlign: TextAlign.left,
overflow:TextOverflow.ellipsis,
maxLines:2,
textScaleFactor:1.5,
style:TextStyle(
fontSize: 20.0,
color:Colors.red,
fontWeight:FontWeight.w800,
fontStyle: FontStyle.italic,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.green,
decorationStyle: TextDecorationStyle.dashed,
letterSpacing: 8.0
),
),
height:300.0,
width:300.0,
decoration: BoxDecoration(
color:Colors.yellow,
border: Border.all(
color:Colors.blue,
width: 2.0
),
borderRadius: BorderRadius.all(
Radius.circular(9),
),
),
// padding: EdgeInsets.all(10),
padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
margin:EdgeInsets.fromLTRB(20, 20, 20, 20),
// transform: Matrix4.translationValues(-50, -10, 0),
// transform:Matrix4.rotationZ(0.2),
transform: Matrix4.diagonal3Values(0.8, 1, 1),
alignment: Alignment.bottomCenter,
)
);
}
}效果图：
