秒懂Flutter之Android/IOS程序员如何快速上手

深藏阁楼爱情的钟 2023-01-06 05:45 87阅读 0赞

> \[版权申明\]非商业目的注明出处可自由转载  
> 博文地址：https://blog.csdn.net/ShuSheng0007/article/details/112599584  
> 出自：shusheng007

[初识Flutter之搞定布局约束][Flutter]  
[秒懂Flutter Widgets之Tabs构建 (TabBar,TabBarView, TabController)][Flutter Widgets_Tabs_ _TabBar_TabBarView_ TabController]

### 文章目录 ###

*  前言
 *  转变思维
 *   *  命令式
     *  声明式
 *  结论
 *  总结

# 前言 #

[Flutter][Flutter 1] 近两年在江湖上崛起的非常迅猛，业已成为移动开发中不的不重视的一股力量。如果你是一个有追求的IOS/Android程序员，我想你非常有必要尝试一下。

我接触Android开发也有几年了，前段时间公司大力推广Flutter技术，所以有幸尝试了一下。本人一直信奉善于总结是不断进步的不二法宝，这样你才能不断的超越同行，不被裁员，所以在此准备以切身体验提供一些快速掌握Flutter的一些技巧。

# 转变思维 #

其实移动开发者学习Flutter，最关键的就是要转变思维。

众所周知，Flutter的定位是一套跨平台的UI工具箱，所以UI是学习Flutter的主要矛盾。下面是官方定义：

> Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase

Flutter的UI设计采用的是**声明式**的风格，而Android/Ios采用的是**命令式**风格。 由于我们习惯了命令式风格，突然转向Flutter的话，总是会以命令式的思维去思考，会遇到较大麻烦。只要转变了思维，对于一个有经验的Android/Ios开发者而言，Flutter就变得非常简单了。那么什么是声明式风格？什么又是命令式风格呢？多说无益，实例走起…

假设现在有一个很简单的需求: UI上有个方块，要求根据不同的情形展示不同的颜色，如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NodVNoZW5nMDAwNw_size_16_color_FFFFFF_t_70]  
下面我们分别用命令式与声明式实现上面的需求，看看有什么区别

## 命令式 ##

//UI方块
    View square= ...
    if(color==red)
       square.setColor(red);
    else if(color==blue)
       square.setColor(blue);

上面的伪代码展示了，不同条件下，我们通过调用View对象的方法`setColor`来修改其颜色属性，从而达到改变其颜色的需求。

可见，命令式是通过修改UI对象的状态来达到改变UI显示样式的，这就意味着此UI对象必须是可变的，这就要求开发者负责维护这些UI对象的状态。

## 声明式 ##

if(color==red){
        View square1= new View()；
        square1.setColor(red);
        return square1；
    }     
    else if(color==blue){
        View square2= new View()；
        square2.setColor(blue);
        return square2；
    }

上面的伪代码展示了，不同的条件下，我们构建新的颜色不一样的View对象来实现改变其颜色的需求。

可见，声明式可以使View对象为不可变对象，每次改变UI都是构建一个新的UI对象，而不是去修改其属性。

# 结论 #

所以在使用Flutter构建UI时千万不要想着去修改UI对象的状态（属性），如果UI状态变了，例如Textview的内容从`I love android` 变成了`I love flutter`, 不要想着调用`Textview`对象的方法去修改其文本，而是要以`I love flutter`为文本去构建一个新的Textview对象。剩下的就交给Flutter框架吧，其会帮你重新渲染那些必要的部分。

在Flutter中状态和UI（Widget）是分开的，当我们要刷新UI的时候，只需要准备好状态，然后Flutter框架就会使用这些新的状态重新构建新的Widget。

让我们通过一个实例感受一下

class TabBarPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('TabBar'),
          ),
          body: _buildText(),
        );
      }
    
      Text _buildText(){
        bool isLoveAndroid = true;
        if(isLoveAndroid)
          return Text('I love Android');
        else
          return Text('I love Flutter');
      }
    }

下面的代码，构建了如下一个非常简单的页面，由于我们`isLoveAndroid`为true，所以Flutter就为我们构建了一个展示`I love Android`的Text控件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NodVNoZW5nMDAwNw_size_16_color_FFFFFF_t_70 1]

# 总结 #

只要转变了思维，在使用Flutter搭建UI的时候就会显得很顺畅，特别是设计复杂UI的时候，不会进入死胡同。

> 最后为自己拉个票吧，我支不量力的参加了2020年的博客之星评选，我知道现在拉票有点晚，但是还是希望小伙伴们能随手支持一下。  
> 方法：点击下面的链接进入投票页面，为ShuSheng007贡献上您珍贵的一票，谢谢。  
> [2020年博客之星][2020]

[Flutter]: https://blog.csdn.net/ShuSheng0007/article/details/110292757
[Flutter Widgets_Tabs_ _TabBar_TabBarView_ TabController]: https://blog.csdn.net/ShuSheng0007/article/details/113094263
[Flutter 1]: https://github.com/flutter/flutter
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NodVNoZW5nMDAwNw_size_16_color_FFFFFF_t_70]: /images/20221119/b75041c614754f7b9d5d5fd26c23952a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NodVNoZW5nMDAwNw_size_16_color_FFFFFF_t_70 1]: /images/20221119/3b5300f38b864cf5bd6c609455c83328.png
[2020]: https://bss.csdn.net/m/topic/blog_star2020/detail?username=shusheng0007