组件积木

先前有提过在开发Flutter应用程序的过程中，我们大部份是使用各式不同功能的组件来组合而成。「工欲善其事，必先利其器」 就让我们来认识一些组件的类型以及使用方式吧。

Text

Text 是画面上用来显示文字内容的组件。

var text = Text("text");

透过style参数设定，设定与本文相关的参数，例如大小、颜色、字体…。

    var textWithStyle = Text(
      "Bold Text",
      style: const TextStyle(
        fontWeight: FontWeight.bold,
        color: Colors.blue,
      ),
    );

也有像是 css 里的 text-align 属性语法 textAlgin，如下：

• left：向左对齐
• right：向右对齐
• center：置中对齐
• justify：左右对齐
• start：与TextDirection书写设定有关
• end：与TextDirection书写设定有关

    var textWithAlgin = Text(
      "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
      ),
    );

我们也可以透过透过Text.rich描述一段具有不同样式或功能的本文内容，例如文字超连结。

    var richTextWithSpanStyle = Text.rich(
      TextSpan(
        children: [
          TextSpan(
            text: "铁人赛: ",
            style: TextStyle(color: Colors.red),
          ),
          TextSpan(
            text: "点我去报名吧",
            style: TextStyle(color: Colors.blue),
            recognizer: TapGestureRecognizer()
              ..onTap = () =>
                  print('Go https://ithelp.ithome.com.tw/2021ironman/event'),
          ),
        ],
      ),
    );

字体设定

在开发 UI 上为了风格以及 App 特色，往往有使用特殊的字体用来处理文字的样式，我们可以将想要使用的字体放置 Flutter 的专案目录下。

Gooogle Fonts 提供了许多免费以及开源的字体，可以至这边下载测试。

并至 pubspec.yaml 的 flutter: 区块中设定好字体的路径。

flutter:
  fonts:
    - family: BungeeOutline
      fonts:
        - asset: assets/fonts/BungeeOutline-Regular.ttf

如此一来就可以透过fontFamily指定想要的字体样式。

    var textWithFont = Text(
      "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontFamily: 'BungeeOutline',
      ),
    );

注意这边新增档案後需要重新flutter run 让 Flutter 将档案打包进行，不然热重载是不会看到效果的喔。

范例如下：

Image

Image 可以用来显示一张图片，根据载入来源(network、file、asset、memory)的不同，会有不同对应的建构方法可以使用，下面我们练习较常使用的两种方式：

• Assets

让我们照着刚刚字体设定的方式，新增一张图片至 assets 目录下的 images，这个assets名称你可以自己定义，只要路径与 pubspec.yaml 一致即可，设定错误的话在打包的过程 Flutter 读取不到将会产生对应的错误讯息。

flutter:
  assets:
    - assets/images/cat-2083492-pixabay.jpg

使用 Image.asset 建构方法就可以快速的完成图片的载入方式

    var imageFromAssets = Image.asset(
      "assets/images/cat-2083492-pixabay.jpg",
      width: 300,
    );

Asset 范例猫咪图片使用来源pixabay图库

• Network

使用 Image.network 方样提供图片的 url 路径来源。

    var imageFromNetowrk = Image.network(
      'https://itadstatic.ithome.com.tw/B1/1628779934_6115359ee4a54.gif',
    );

Network 范例图片使用 2021 ithoem 铁人赛 banner

P.S. 图片来源若有侵权行为在麻烦通知我，感谢。

Widgets Library

在今日 Text、Image 两个简单的 widget 介绍中，我们可以发现在不同的 widget 通常会对应着不同的参数设定，这些参数或是使用方法我们不可能完全记得住，因此後续在学习过程中，我们通常可以透过下面几个方法找到更多操作上的细节：

• Flutter SDK 内的 widgets library API 说明页

除了参数的说明外，有些章节还会提供使用范例。

• 整合开发工具(IDE)的原始码追踪功能

以 VScode 为例，使用 CMD + 滑鼠左键 点选类别名称，IDE会开启 Flutter SDK 中的程序码来源，从程序码内的内容以及注解可以找到参数的设定方式。

• Google 大神

有了 widget 以及相关的参数名称，但是还是搞不懂要如何使用，就将这些关键字贴给 Google 的大大吧。

小结

练习成果-Text

练习成果-Image

今日我们以Text以及Image这两个简单的组件做为 widget 学习的开场，带领读者开始认识 widget ，後续的章节将会介绍更多在 App 上常见的组件，理解未来在开发 App 时要如何使用这些 widget 客制化自己想要的介面以及功能。