Flutter 找到对应组件的心路历程反思

一直专注于后端开发，之前虽然也对前端稍有涉猎，毕竟才疏学浅，至今依然学之皮毛。据说移动端早已趋向饱和，末日黄花之论甚嚣尘上，以前 Android IOS 双头并进，虽心痒难耐，终是分身乏术，未敢入坑。幸得 Flutter 横空出世，天下一统，赶紧入坑。果然，此坑不浅，光是各类 widget 多如牛毛，更不要谈其繁杂的属性集了。

近来自己做个小玩意儿，一个登录界面，最终效果如图：

登录按钮下的两三行提示文字就折磨了我许久（请君莫笑，我有小白光环加持）。一开始考虑着这里有多种不同的样式，又要对用户协议 隐私条款 加点击事件，所以当时的代码是：

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: [
              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(
                  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。

路漫漫其修远兮，吾将上下而求索！