初探Flutter_flutter flex布局-CSDN博客

本文链接：https://blog.csdn.net/worship_Kill/article/details/102799885

Flutter作为Google大厂出品，肯定信得过。相比于RN用JSBridge 调用原生控件渲染，Flutter直接跳过这一层，而是选择用自己的UI框架渲染，更加高效，dart作为20多种语言里被选用的肯定也有它的道理。今天就来学习一下这个跨平台的框架。

工欲善其事必先利其器，首先是安装环境，然后是编译器。

1.你需要去Flutter下载SDK包，然后解压，记住路径。Mac和Windows路径稍有不同，不懂的同学自行搜索，然后根据步骤一步步安装，具体的情况网上有很多，安装也很简单，我就不多叙述了。这里主要针对安装好环境的同学。

2.安装好环境后，你可以选择使用VS Code或者Android Studio作为你的编译器，看个人喜好。

3.所有环境都配置好后，就可以开始你的Flutter之旅了。打开你的编译器，VS Code使用快捷命令直接就可以创建一个新的工程，打开工程后点击F5或者在终端/命令行输入Flutter run就可运行。里面会自动生成一个demo的代码，大概如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

运行效果如下：

其实这些都然并卵，只是给你一个错觉，创建=完成。请关掉模拟器，然后将main.dart里面的东西全删掉。

4.打开你的浏览器，输入dart语法基础，将基础的语法学习之后，好了可以继续接下去的事。

5.学习过dart之后，先要改变一个观点，在flutter中没有view，所有的东西叫Widget，Widget不是view，你可以创建它，但是它没有像view的功能，与原生开发相比，这里没有父视图，子视图，而是通过这个Widget的东西来连接。想要写出一个flutter的程序，首先要知道Widget，其实Widget就像一个配方，你把配方中需要的东西填进去就可以了，它要什么你给什么，你想要什么就填什么。

6.flutter与原生开发相比，布局方面大有不同，在原生中通过父视图的坐标来确定子视图的位置和大小，而在flutter中，Widget是不可以更改的，记住Widget不能像view一样修改frame，bounds等属性来调整大小。Widget有两种模式，一种是不可变的叫StatelessWidget，一种叫StatefulWidget，意思是可变的和不可变的，数据不变的一般用StatelessWidget，数据可变的就要用到StatefulWidget了。

7.flutter布局对于常年驻扎原生开发的我来说，一上手就蒙的不行，根本不知道怎么办，怎么写都不对，后来通过对其他Widget的了解，慢慢可以操作复杂一点的视图了。下面看看主要的布局Widget。

MaterialApp	提供app的UI框架，APP入口的home：Widget
Scaffold	提供导航栏的设置，提供显示内容的body：Widget等
Container	里面只能包含一个child子Widget，可以设置外边距(等同于距离父节点Widget的上下左右长度)和内边距(等同于距离子节点Widget的上下左右长度，限制子节点里面的活动范围)，宽度，高度，背景色等
Center	默认在父节点居中，只能包含一个child子Widget
Expanded	默认充满父节点，默认均等分配占用内容的多少，只能包含一个child子Widget，可以用flex均等的调整分配的占用内容的多少
Row	默认充满父节点，可以包含多个child子Widget，使用时用children，在children里面填充多个Widget，呈左右分布排列
Column	默认充满父节点，可以包含多个child子Widget，使用时用children，在children里面填充多个Widget，呈上下分布排列

了解完这几个Widget之后就可以动手写UI了，这些Widget都是可一个包含一个的(MaterialApp和Scaffold不布局之内，只是特殊的Widget)，也就是说可以用这几个Widget一个包含一个或者一个包含多个来叠加形成一个视图，所以我们要养成封装，分步的好习惯，不然你的代码就是很长的括号，到时候自己也懵圈了。

8.一个简单的滚动视图。

滑动视图在APP中是不可缺少的一环，所以在flutter中也有对应的Widget供你选用。主要是ListView，GridView，以及ScrollView还有他们的自定义View。

Listview就是上下滑动的表格一般的视图，GridView就是左右滑动或者上下滑动，分成一个个格子的视图，Scrollview中的CustomScrollView可以将两者结合，完成复杂的视图。

效果如下：