Flutter 找到所需元件心路歷程反思

seeker-x2y發表於2019-12-24
Flutter元件

一直專注於後端開發，之前雖然也對前端稍有涉獵，畢竟才疏學淺，至今依然學之皮毛。據說移動端早已趨向飽和，末日黃花之論甚囂塵上，以前 Android IOS 雙頭並進，雖心癢難耐，終是分身乏術，未敢入坑。幸得 Flutter 橫空出世，天下一統，趕緊入坑。果然，此坑不淺，光是各類 widget 多如牛毛，更不要談其繁雜的屬性集了。

近來自己做個小玩意兒，一個登入介面，最終效果如圖：

Flutter
登入按鈕下的兩三行提示文字就折磨了我許久（請君莫笑，我有小白光環加持）。一開始考慮著這裡有多種不同的樣式，又要對使用者協議 隱私條款 加點選事件，所以當時的程式碼是：

Container(
         width: MediaQuery.of(context).size.width,
          margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 10.0),
          child: Wrap(         // 換行
            spacing: 1,
            children: <Widget>[
              Text(
                '溫馨提示：未註冊賬號的手機號，登入時將自動註冊，且代表您已同意',
                style: TextStyle(fontSize: 12, color: Colors.black54),
              ),
              GestureDetector(
                child: Text(
                  '《使用者協議》',
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.blue,
                  ),
                ),
                onTap: () {
                  NavigatorUtil.goAgreementPage(context, 'user');
                },
              ),
              Text(
                '和',
                style: TextStyle(fontSize: 12, color: Colors.black54),
              ),
              GestureDetector(
                child: Text(
                  '《隱私條款》',
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.blue,
                  ),
                ),
                onTap: () {
                  NavigatorUtil.goAgreementPage(context, 'privacy');
                },
              ),
            ],
          ),
        ),

以上程式碼出現的實際效果是：
文字不同行
如圖，多個Text widget 並沒出現在同一行，沒達到預想效果。於是再次查詢，最終發現 RichText 這個widget

現在回過頭來想，當初學習 Flutter 週期較短，急功近利，手冊並沒有仔仔細細的通篇看完，更不要談每個細節都實操，而是用到哪兒重點看哪個部分。但這個就又引申出另一個話題了，技術自學是該系統學習還是有選擇的學習，此處按下不表。做這個專案時孤立的把換行，不同樣式，事件這幾件事分別考慮了，並沒意識到這就是富文字（RichText），更想不到 Flutter 中會直接提供 RichText 這個 widget，完美解決所有問題。
最終程式碼：

Container(
      width: MediaQuery.of(context).size.width,
      margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 10.0),
      child: RichText(
        softWrap: true,    // 換行完美解決
        text: TextSpan(
            text: '溫馨提示：未註冊賬號的手機號，登入時將自動註冊，且代表您已同意',
            style: TextStyle(fontSize: 12, color: Colors.black54),
            children: <TextSpan>[
              TextSpan(
                  text: '《使用者協議》',
                  recognizer: TapGestureRecognizer()          // 點選事件完美解決
                    ..onTap = () async {
                      NavigatorUtil.goAgreementPage(context, 'user');
                    },
                  style: TextStyle(
                    color: Colors.blue,    // 同一行中不同文字樣式完美解決
                  )),
              TextSpan(
                text: '和',
                style: TextStyle(color: Colors.black54),
              ),
              TextSpan(
                text: '《隱私條款》',
                style: TextStyle(
                  color: Colors.blue,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () async {
                    NavigatorUtil.goAgreementPage(context, 'user');
                  },
              ),
            ]),
      ),
    )

記得在《 我們和 Flutter Create 全球大獎得主喝了一杯功夫茶 》一文中，胡澤標總結自己的開發心得的第一條是：

掌握足夠的英語知識，這樣可以幫助自己儘可能多渠道地瞭解知識點，而且谷歌搜尋在尋找程式設計解決方案時很好用

雖然看似老生常談，且是大實話，但是由這次做專案，我發現至少 Fultter 開發中，若是有足夠的英語知識，也許類似文字多行顯示個別文字不同樣式這樣的問題我就可以更為自然的方式想到 RichText。

路漫漫其修遠兮，吾將上下而求索！

相關文章