[Day8] Flutter - 显示文字元件 ( Text )

前言

Hi, 我是鱼板伯爵今天要教大家 Text 这个元件，教学内容只会撷取片段程序码，建议大家搭配完整程序码来练习。

完整程序码

Text

Text文字显示元件，可以把想要显示在画面上的文字打在里面。

class DemoText extends StatelessWidget {
  const DemoText({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("Hello World"),
    );
  }
}

如果显示的字串是一个变数的话，必须要用$加变数才行。

class DemoTextValue extends StatelessWidget {
  const DemoTextValue({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final String str = "World";
    return Column(
      children: [
        Text("Hello $str"),
      ],
    );
  }
}

如果字串是Class包起来之类的话那就要用${}包起来否则无法显示喔！

class DemoTextClassValue extends StatelessWidget {
  const DemoTextClassValue({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final word = Word();
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("Hello ${word.str}"),
      ],
    );
  }
}

class Word {
  final String str = "World";
}

TextStyle

文字的风格、大小和颜色等等都可以在TextStyle中做调整。

class DemoTextStyle extends StatelessWidget {
  const DemoTextStyle({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "Hello World",
          style: TextStyle(
            color: Colors.red,
            fontSize: 50,
          ),
        ),
      ],
    );
  }
}

你还可以将你的style打包起来重复使用。

class DemoTextStyle extends StatelessWidget {
  const DemoTextStyle({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "Hello World",
          style: myStyle(),
        ),
        Text(
          "Hello World",
          style: myStyle(),
        ),
        Text(
          "Hello World",
          style: myStyle(),
        ),
      ],
    );
  }

  TextStyle myStyle() {
    return TextStyle(
      color: Colors.red,
      fontSize: 50,
    );
  }
}

切割字串

有时候在显示文档的时候会想把重点变成不一样的颜色，你可以考虑使用RichText把多个字串包在一起。

class DemoRichText extends StatelessWidget {
  const DemoRichText({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: RichText(
        text: TextSpan(
          children: <TextSpan>[
            TextSpan(
              text: 'Hi, ',
              style: TextStyle(
                color: Colors.black,
              ),
            ),
            TextSpan(
              text: 'Hello',
              style: TextStyle(
                color: Colors.red,
              ),
            ),
            TextSpan(
              text: ' World',
              style: TextStyle(
                color: Colors.black,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Text 字体变更

如果想要使用外部字体的话，需要先到pubspec.yaml最下面的fonts设定字体包的路径，然後重新build app就可以使用设定的字体了。

pubspec.yaml

  fonts:
    - family: asd
      fonts:
        - asset: assets/asd/asd-Regular.ttf
        - asset: assets/asd/asd-Italic.ttf

Widget:

class DemoTextFamily extends StatelessWidget {
  const DemoTextFamily({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        "Hello World",
        style: TextStyle(fontFamily: 'asd'),
      ),
    );
  }
}