FlutterContainer 组件、 Text 组件详解

一、FlutterText组件............................................................................................................... 1

二、FlutterContainer组件...................................................................................................... 2

三、Vscode调试Flutter项目................................................................................................. 3

一、 FlutterText 组件

名称 功能

textAlign 文本对齐方式（center居中，left左

对齐，right右对齐，justfy两端对齐）

textDirection 文本方向（ltr从左至右，rtl从右至

左）

overflow 文字超出屏幕之后的处理方式（clip

裁剪，fade渐隐，ellipsis省略号）

textScaleFactor 字体显示倍率

maxLines 文字显示最大行数

style 字体的样式设置

下面是 TextStyle 的参数 ：

名称 功能

decoration 文字装饰线（none没有线，lineThrough删除线，overline上划线，underline下划线）

decorationColor 文字装饰线颜色

decorationStyle 文字装饰线风格（[dashed,dotted]虚线，

double两根线，solid一根实线，wavy波浪
线）

wordSpacing 单词间隙（如果是负值，会让单词变得更紧

凑

letterSpacing 字母间隙（如果是负值，会让字母变得更紧

凑）

fontStyle 文字样式（italic斜体，normal正常体）

fontSize 文字大小

color 文字颜色

fontWeight 字体粗细（bold粗体，normal正常体）

更多参数：https://docs.flutter.io/flutter/painting/TextStyle-class.html

二、 FlutterContainer 组件

名称 功能

alignment topCenter：顶部居中对齐

topLeft：顶部左对齐
topRight：顶部右对齐
center：水平垂直居中对齐
centerLeft：垂直居中水平居左对齐
centerRight：垂直居中水平居右对齐
bottomCenter底部居中对齐
bottomLeft：底部居左对齐
bottomRight：底部居右对齐

decoration decoration:BoxDecoration(

color:Colors.blue,
border: Border.all(
color: Colors.red,
width: 2. 0 ,
),
borderRadius:
BorderRadius.all(
Radius.circular( 8. 0 )
)

)

margin margin属性是表示Container与外部其他

组件的距离。

EdgeInsets.all( 20. 0 ),

padding padding就是Container的内边距，指

Container边缘与Child之间的距离
padding:EdgeInsets.all( 10. 0 )

transform 让Container容易进行一些旋转之类的

transform:Matrix 4 .rotationZ( 0. 2 )

height 容器高度

width 容器宽度

child 容器子元素

更多参数：https://api.flutter.dev/flutter/widgets/Container-class.html

三、 Vscode 调试 Flutter 项目

1 、 Vscode 中打开 flutter 项目进行开发

2 、运行 Flutter 项目

flutter run

r 键：点击后热加载，也就算是重新加载吧。
p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
o 键：切换android和ios的预览模式。
q 键：退出调试预览模式。

3 、 Vscode 默认连不上第三方模拟器解决方案

cd 到对应夜神模拟器 D:\Program Files\Nox\bin 目录 然后运

nox_adb.exe connect 127.0.0.1:62001