Text和Container组件
- 一、先建立一个主页面
- 二、首先可以看到Center组件中的子组件Container
- 三、Container子组件对应的内容是今天的另一个细节Text组件
- 四、Text组件和Container组件
一、先建立一个主页面
1.首先输入fim，就会自动跳出第一段引用。
2.然后在主函数中runApp(MyApp());
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}3.定义好MyApp的内容
返回的是MaterialApp组件的home和body元素。Home利用Scaffold元素中的appBar定义上划栏的组件。Body里面就是一个新的定义组件。
//自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter demo')),
body: HomeContent(),
));
throw UnimplementedError();
}
}4.运行结果如下：
今天需要学习的Text组件和Container组件都放在新组件HomeContent中。以后对内容的修改最后都这么做。
二、首先可以看到Center组件中的子组件Container
Container中包括了子组件、height、width、以及decoration组件。分别设置了容器的内容、高度、宽度以及装饰。装饰包括color和border，装饰了容器的背景色为蓝色，边框的颜色为黄色宽度为2.0.
三、Container子组件对应的内容是今天的另一个细节Text组件
下面设置了文本内容、textAlign和style。textAlign设置了文章居中显示。Style设置了文字的大小和间距。
HomeContent全部代码如下
//将center组件重新封装在HomeContent中
class HomeContent extends StatelessWidget {
get yellow => null;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Container(
child: Text('我是一个文本',
textAlign: TextAlign.center,//文本显示位置
//overflow: TextOverflow.ellipsis,溢出就是几个点，如果不做溢出设置，就会自动换行
style: TextStyle(
fontSize: 16.0,
letterSpacing: 5.0,//间距
)//字体大小显示
),
height: 300.0,
width: 300.0,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.yellow,
width: 2.0,
) /*边框的颜色*/
)));
throw UnimplementedError();
}
}运行结果如下
四、Text组件和Container组件
1.TextWidget常用属性
名称 | 功能 |
textAlign（TextAlign） | 文本对齐（center居中，left左对齐，right右对齐，justfy两端对齐） |
textDirection（TextDirection） | 文本方向（ltr从左到右，rlt从右到左） |
maxLines（init） | 文本显示的最大行数 |
overflow（TextOverflow） | 控制文本的溢出效果（clip剪裁，fade渐隐，ellipsis省略号） |
TextScaleFactor | 字体显示倍率 |
style（TextStyle） | 文字样式设计 |
TextStyle文字样式设计，主要有
名称 | 功能 |
fontSize(double） | 字体大小 |
color(Color,Colors) | 字体颜色 |
fontWeight(FontWeight) | 加粗（bold粗体） |
fontStyle（FontStyle） | 字体样式（italic斜体，normal正常体） |
decoration(TextDecoration) | 文字装饰（none没有线。lineThrough删除线，overline上划线，underline下划线） |
decorationColor(Color,Colors) | 文字装饰的颜色 |
decorationStyle(TextDecorationStyle) | 文字装饰线条类型（[dashed,dotted]虚线，double两根线，solid一根线，wavy波浪线） |
decorationThickness(double) | 文字装饰线条宽度 |
letterSpacing() | 字间距（英文指每个字母之间，如果为负值字母更紧凑。中文指每个字体之间） |
backgroundColor(Color,Colors) | 字体背景颜色 |
wordSpacing | 字体间距离（英文指每个单词间） |
textBaseline | 基线 |
shadows | 绘制文字阴影 |
fontFamily | 文字字体"Rock Salt" |
height | 好像是设置line-height的 |
2.Container组件
名称 | 功能 |
child | |
height(double) | 高度 |
width | 宽度 |
padding(EdgeInsets) | 内边距 fromLTRB(左，上，右，下) |
margin | 同padding |
alignment(Alignment) | child在容器中的对齐方式 |
transform(Matrix4) | 动画 translationValues rotationZ
decoration(BoxDecoration) | 背景颜色，边框，圆角
decoration样式，主要有
名称 | 功能 |
color(Color, Colors) | 背景颜色 |
border(Border) | Border.all同时设置四条边框， Border设置单边框 |
borderRadius | 圆角 |
如果记不住对应的用法，只要将鼠标放在对应的方法上即可查看。
