flutter基础组件——Text，Android面试你必须要知道的那些知识

Flutter框架主要特性

---

1、快速开发

Flutter 的热重载可以快捷方便的试验、重构 UI和bug修复。在模拟器与Android 硬件上体验亚秒级的重载，而不会丢失状态。

2、跨平台

Flutter至少可以跨5种平台，甚至支持嵌入式开发。我们常用的有MacOS、Windows、Linux、Android、IOS，甚至可以在谷歌最新的操作系统Fuchsia上运行。

3、响应式框架

通过 Flutter 的Reactive框架和丰富的平台布局和基础组件快速方便地构建用户界面。用强大而灵活的 apis 解决 2D、动画、手势、效果等难题。

4、绚丽 UI

通过 Flutter 内建的漂亮的质感设计和 Cupertino、丰富的动画 api和平台感知，让用户对界面设计感到满意。

认识Flutter基础组件

---

Flutter里有一个非常重要的核心理念：一切皆为组件，Flutter所有的元素皆由组件组成。接下来让我们来认识两个基础组件——Text，Container

Text主要参数详解

---

| 属性 | 说明 |

| — | :-: |

| textAlign | 文本水平方向对齐方式，取值有center、end、justify、left、right、start、values |

| textDirection | 从左到右使用TextDirection.ltr，从右到左使用TextDirection.rtl |

| textScaleFactor | 字体缩放系数，如：如果此属性设置的值为1.5，那么字体会放大150% |

| textSpan | 文本块，TextSpan里可以包含文本内容及样式 |

| data | 要显示的文本 |

| maxLines | 文本显示的最大行数 |

| style | 文本样式，可定义文本的字体大小、颜色、粗细等 |

TextStyle style

| 属性 | 说明 |

| — | :-: |

| TextDecoration decoration | 绘制文本装饰；下划线（TextDecoration.underline）上划线（TextDecoration.overline）删除线（TextDecoration.lineThrough）无（TextDecoration.none） |

| Color decorationColor | 绘制文本装饰的颜色 |

| FontStyle fontStyle | 字体变体：FontStyle.italic 使用斜体FontStyle.normal 使用直立 |

| double height | 文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2） |

| Locale locale | 此属性很少设置，用于选择区域特定字形的语言环境 |

构造方法1：用于创建一个单一格式的 Text

Text(String data, { Key key, TextStyle style, TextAlign textAlign, TextDirection textDirection, Locale locale, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines, String semanticsLabel })

使用构造方法1，对上述属性进行运用，示例如下：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

Paint backgroundPaint = new Paint();

backgroundPaint.color = new Color(0xFFFFFFFF);

List shadowList = new List();

shadowList.add(new Shadow(

//阴影颜色

color: new Color(0xFFFF0000),

//模糊程度

blurRadius: 2.0));

return MaterialApp(

debugShowCheckedModeBanner: false,

title: ‘Text widget’,

home: Scaffold(

appBar: new AppBar(

title: new Text(‘Text widget’),

),

body: new Text(

//单一格式文本框，第一个参数为文本内容

“我是一段测试文本Hello World!我是一段测试文本 Hello World!我是一段测试文本 Hello World!我是一段测试文本 Hello World!我是一段测试文本 Hello World!”,

//文字对齐方式，文本开始位置对齐，类似左对齐

textAlign: TextAlign.start,

//文字方向

textDirection: TextDirection.ltr,

//文字最多显示行数

maxLines: 3,

//当文本内容超过最大行数时，剩余内容的显示方式，相当于Android 的 ellipsize 属性

overflow: TextOverflow.ellipsis,

//文本样式

style: new TextStyle(

//文字颜色，值为一个 Color 对象

color: new Color(0xFF000000),

//添加装饰物：下划线

dec

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

oration: TextDecoration.underline,

//设置装饰物的颜色，值为一个 Color 对象

decorationColor: new Color(0xFF00FFFF),

//设置装饰物的样式，装饰线为虚线

decorationStyle: TextDecorationStyle.dashed,

//字体大小

fontSize: 20.0,

//字体样式：斜体

fontStyle: FontStyle.italic,

//字体字重，常用值有 FontWeight.bold（加粗）

fontWeight: FontWeight.bold,

inherit: false,

//字间距，值为 double 类型

letterSpacing: 2.0,

//文字阴影，值为一个 Shadow 集合

shadows: shadowList,

//文本基线：用于对齐字母字符的字形底部的水平线

textBaseline: TextBaseline.ideographic,

//字体间距

wordSpacing: 10.0,

//行高

height: 2.0),

),

),

);

}

}

运行结果如下：

构造方法2：用于创建一个富文本的 Text

Text.rich(TextSpan textSpan, { Key key, TextStyle style, TextAlign textAlign, TextDirection textDirection, Locale locale, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines, String semanticsLabel })

使用构造方法2，对上述属性进行运用，示例如下：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

Paint backgroundPaint = new Paint();

backgroundPaint.color = new Color(0xFFFFFFFF);

List shadowList = new List();

shadowList.add(new Shadow(

//阴影颜色

color: new Color(0xFFFF0000),

//模糊程度

blurRadius: 2.0));

return MaterialApp(

debugShowCheckedModeBanner: false,

title: ‘Text widget’,

home: Scaffold(

appBar: new AppBar(

title: new Text(‘Text widget’),

),

body: new Text.rich(

//富文本文本框构造方法，可以显示多种样式的text，第一个参数为 TextSpan

new TextSpan(

text: “我是一段测试文本”,

//文字样式，如果后面的子 TextSpan 没有覆盖该 TextStyle 中的属性，则使用该 TextStyle 指定的样式

style: new TextStyle(

//文字颜色，整体的文字颜色，如果后面的子 TextSpan 没有覆盖该属性，则使用该文字颜色

color: new Color(0xFF000000),

fontSize: 20.0,

decoration: TextDecoration.underline),

//子TextSpan，可以指定多个

children: [

new TextSpan(

text: “Hello”,

style: new TextStyle(

color: new Color(0xFFFF0000),

fontSize: 30.0,

fontStyle: FontStyle.italic)),

new TextSpan(

text: “World”,

style: new TextStyle(

color: new Color(0xFFFFFF00),

fontSize: 40.0,

fontWeight: FontWeight.bold)),

]),

textDirection: TextDirection.ltr,

),

),

);

}

}

运行结果如下：

可以看到我们给Text设置的各种属性基本都呈现出来了

认识Container

---

Container是一种常用的控件，由负责布局、绘画、定位和大小调整的几个控件组成，具体来说，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件组成，而不是将Container子类化来产生自定义效果。

Container主要参数详解

---

| 属性 | 说明 |

| — | :-: |

| padding | 内边距 |

| margin | 外边距 |

| decoration | 装饰 BoxDecoration类型 |

| width | 容器宽 |

| height | 容器高 |

| constraints | 应用于子元素的附加约束 |

| child | 容器子元素 |

| color | 背景色 |

| topCenter | 顶部居中对齐 |

| topLeft | 顶部左对齐 |

| topRight | 顶部右对齐 |

| center | 水平垂直居中对齐 |

| centerLeft | 垂直居中水平居左对齐 |

| centerRight | 垂直居中水平居右对齐 |

| bottomCenter | 底部居中对齐 |

| bottomLeft | 底部居左对齐 |

| bottomRight | 底部居右对齐 |

对上述属性进行运用，示例如下：