【Flutter】【package】auto_size_text 文字自动适配大小

---

前言

auto_size_text ：https://pub.flutter-io.cn/packages/auto_size_text

---

一、auto_size_text 是什么？

第三方的插件，能够自动适配你的文本的大小。来适应边界。

二、使用

1.简单的使用

style 部分同text的一样的，基础的功能设备都是同text 文本的使用一样。
下面做一个简单的对比。我们限制一个宽度高度。在里面放入文本。

• 使用text：文字显示不全的

return Scaffold(
    appBar: AppBar(
      // Here we take the value from the MyHomePage object that was created by
      // the App.build method, and use it to set our appbar title.
      title: Text(widget.title),
    ),
    body: const Center(
        child: SizedBox(
      width: 200,
      height: 140,
      child: Text(
          style: TextStyle(fontSize: 100),
          maxLines: 2,
          'Here we take the value from the MyHomePage object that was created by'),
    ))

    // This trailing comma makes auto-formatting nicer for build methods.
    );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 使用了auto_size_text ：自动缩小了文本的size，达到能显示的情况

    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
        ),
        body: const Center(
            child: SizedBox(
          width: 200,
          height: 140,
          child: AutoSizeText(
              style: TextStyle(fontSize: 30),
              maxLines: 2,
              'Here we take the value from the MyHomePage object that was created by'),
        ))

        // This trailing comma makes auto-formatting nicer for build methods.
        );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.参数说明

3.group

可以统一各个autosizetext的大小。fontsize大小。来达到统一各个text的字体大小是一致的

    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            AutoSizeText(
              "text1",
              group: myautosize,
           
              maxLines: 1,
            ),
            AutoSizeText(
              "Here we take the value from the MyHomePage object that was created byHere we take the value from the MyHomePage object that was created by",
              minFontSize: 100,
              group: myautosize,
            )
          ],
        )

        // This trailing comma makes auto-formatting nicer for build methods.
        );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• minFontSize: 100, 最终并不会使用这个最小的的这个fontsize，结果如图
  

4.rich text

    return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
        ),
        body: Column(
          children:const [
            AutoSizeText.rich(
              TextSpan(text: 'A really long String'),
              style: TextStyle(fontSize: 20),
              minFontSize: 5,
            ),
            AutoSizeText.rich(
              TextSpan(children: [
                TextSpan(text: '我是 1'),
                TextSpan(text: '我是 2'),
                TextSpan(text: '我是 3'),
                TextSpan(text: '我是 4'),
                TextSpan(text: '我是 5', style: TextStyle(color: Colors.green)),
              ]),
              style: TextStyle(fontSize: 20),
              minFontSize: 5,
            ),
          ],
        )

        // This trailing comma makes auto-formatting nicer for build methods.
        );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

总结

欢迎关注，留言，咨询，交流！