微信交流群

老孟公众号

介绍五个项目中常用的文本组建案例:

  1. 过渡颜色的文字
  2. 带前后置标签的文本
  3. “服务协议”效果
  4. 登录密码输入框
  5. 评论回复

# 过渡颜色的文字

Builder(
  builder: (BuildContext context) {
    RenderBox box = context.findRenderObject();
    final Shader linearGradient = LinearGradient(
      colors: <Color>[Colors.purple, Colors.blue],
    ).createShader(
        Rect.fromLTWH(0.0, 0.0, box?.size?.width, box?.size?.height));

    return Text(
      '老孟,专注分享Flutter技术和应用实战',
      style: new TextStyle(
          fontSize: 18.0,
          fontWeight: FontWeight.bold,
          foreground: Paint()..shader = linearGradient),
    );
  },
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Builder组件是为了计算当前Text组件大小,生成LinearGradient。

# 带前后置标签的文本

RichText(
  text: TextSpan(
      style: DefaultTextStyle.of(context).style,
      children: <InlineSpan>[
        WidgetSpan(
            child: Container(
              margin: EdgeInsets.only(right: 10),
              padding: EdgeInsets.symmetric(horizontal: 10),
              decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.all(Radius.circular(20)),
                  color: Colors.blue),
              child: Text(
                '判断题',
                style: TextStyle(color: Colors.white),
              ),
            )),
        TextSpan(text: '泡沫灭火器可用于带电灭火'),

      ]),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# “服务协议”

通常在登录页面的底部会出现登录即代表同意并阅读 《服务协议》,其中**《服务协议》**为蓝色且可点击:

Text.rich(
  TextSpan(
      text: '登录即代表同意并阅读',
      style: TextStyle(fontSize: 11, color: Color(0xFF999999)),
      children: [
        TextSpan(
          text: '《服务协议》',
          style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              print('onTap');
            },
        ),
      ]),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 登录密码输入框

TextField(
  decoration: InputDecoration(
    fillColor: Color(0x30cccccc),
    filled: true,
    enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Color(0x00FF0000)),
        borderRadius: BorderRadius.all(Radius.circular(100))),
    hintText: '输入密码',
    focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Color(0x00000000)),
        borderRadius: BorderRadius.all(Radius.circular(100))),

  ),
  textAlign: TextAlign.center,
  obscureText: true,
  onChanged: (value) {

  },
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 评论回复

Text.rich(
  TextSpan(
      text: '回复',
      style: TextStyle(fontSize: 11, color: Color(0xFF999999)),
      children: [
        TextSpan(
          text: '@老孟:',
          style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              print('onTap');
            },
        ),
        TextSpan(
          text: '你好,想知道Flutter发展前景如何?',
        ),
      ]),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18