Flutter Text 组件
名称 | 类型 | 功能 |
textAlign | TextAlign | 文本对齐方式(center 居中,left 左对齐,right 右对齐,justfy 两端对齐) |
textDirection | TextDirection | 文本方向(ltr 从左至右,rtl 从右至左) |
overflow | TextOverflow | 文字超出屏幕之后的处理方式(clip裁剪,fade 渐隐,ellipsis 省略号) |
textScaleFactor | double | 字体显示倍率 |
maxLines | int | 文字显示最大行数 |
style | TextStyle | 字体的样式设置 |
style中TextStyle 的参数
名称 | 类型 | 功能 |
decoration | TextDecoration | 文字装饰线(none 没有线,lineThrough 删除线,overline 上划线,underline 下划线) |
decorationColor | Colors | 文字装饰线颜色 |
decorationStyle | TextDecorationStyle | 文字装饰线风格([dashed,dotted]虚线,double 两根线,solid 一根实线,wavy 波浪线) |
wordSpacing | double | 单词间隙(如果是负值,会让单词变得更紧凑) |
letterSpacing | double | 字母间隙(如果是负值,会让字母变得更紧凑) |
fontStyle | FontStyle | 文字样式(italic 斜体,normal 正常体) |
fontSize | double | 文字大小 |
color | Colors | 文字颜色 |
fontWeight | FontWeight | 字体粗细(bold 粗体,normal 正常体) |
Flutter Container 组件
名称 | 类型 | 功能 |
alignment | Alignment | topCenter:顶部居中对齐 topLeft:顶部左对齐 topRight:顶部右对齐 center:水平垂直居中对齐 centerLeft:垂直居中水平居左对齐 centerRight:垂直居中水平居右对齐 bottomCenter 底部居中对齐 bottomLeft:底部居左对齐 bottomRight:底部居右对齐 |
decoration | BoxDecoration | 背景装饰 |
margin | EdgeInsets | margin 属性是表示 Container 与外部其他组件的距离。 |
padding | EdgeInsets | padding 就是 Container 的内边距 ,指Container 边缘与 Child 之间的距离 |
transform | Matrix4 | 让 Container 容易进行一些旋转之类的 |
height | double | 容器高度 |
width | double | 容器宽度 |
child | 容器子元素 |
Demo
import 'package:flutter/material.dart';
import 'package:myapp/demo/demo.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('flutter demo'),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
// child: Text('hello flutter'),
child: Container(
child: Text(
'这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话',
textAlign: TextAlign.left,
textDirection: TextDirection.ltr,
overflow: TextOverflow.ellipsis,
//一行文本溢出后以 ... 显示
maxLines: 1,
//文本最大显示几行
textScaleFactor: 1.2,
//文本显示倍率
style: TextStyle(
fontSize: 16.0,
color: Colors.teal,
fontWeight: FontWeight.w800, //文本加粗
fontStyle: FontStyle.italic, //字体样式,italic斜体
decoration: TextDecoration.lineThrough, //文本中有线穿过的效果
decorationColor: Colors.white, //穿过的线的颜色
decorationStyle: TextDecorationStyle.dashed, //穿过的线的样式,dashed为虚线
letterSpacing: 5.0, //字间距设置
),
),
height: 300.0,
width: 300.0,
decoration: BoxDecoration(
color: Colors.tealAccent,
border: Border.all(
color: Colors.blue,
width: 2.0,
),
borderRadius: BorderRadius.all(
Radius.circular(10),
), //边框圆角
),
//padding: EdgeInsets.all(20), //内边距,四边文本与框的距离
padding: EdgeInsets.fromLTRB(10, 30, 10, 10), //四边距离,左 上 右 下
margin: EdgeInsets.fromLTRB(10, 30, 10, 10), //内边距
//transform: Matrix4.translationValues(100, 0, 0), //框的位移
//transform: Matrix4.rotationZ(0.3), //框的旋转
//transform: Matrix4.diagonal3Values(1.2, 1, 1),//框的缩放
//alignment: Alignment.bottomLeft, //居于底部左侧
alignment: Alignment.topLeft, //居于顶部左侧
),
);
}
}
运行界面

Comments | NOTHING