Flutter入门指南：跨平台开发、Dart语言与布局组件详解

文章目录

• 前言
• • 1.Flutter来源
  • 2.Flutter优势
  • 3.跨平台设计理念
  • 4.初学者的必看
  • flutter基础
  • • 2.1 Dart语言
    • 2.2 初识Flutter
    • 2.3 GridView网格布局组件介绍
    • 2.4 弹性布局（Flex Expanded）
    • 2.5 Stack层叠组件
    • 2.6 Wrap组件
    • 持续更新中
    • 结尾

      前言

      当你刷到这篇文章，就说明我们有缘。

      1.Flutter来源

      Flutter是谷歌公司开发的一款开源、免费的UI框架,可以让我们快速的在Android和iOS上构建高质量App. 它最大的特点就是跨平台、以及高性能. 目前 Flutter 已经支持 iOS、Android、Web、Windows、macOS、Linux 的跨平台开发.

      2.Flutter优势

      Flutter是谷歌基于Dart语言开发的一款跨平台的App开发框架。它针对的开发者是全部开发者。它的性 能相比RN、Ionic这样的框架要更好一些。

      3.跨平台设计理念

      端上的开发无外乎三件事，“数据获取”，“状态管理”，“页面渲染”。

      而在跨端领域的竟争，是 “虚拟机”，“渲染引擎”，“原生交互”，“开发环境” 的竟争

      Flutter应用在一个VM上运行，使得可在保留状态且无需重新编译情况下，进行热加载。

      发行时，Flutter应用会直接通过AOT编译为机器码或者是JS。大大提高了开发效率。

      4.初学者的必看

      这里只是博主一个人想给想学Flutter的初学者的一些小小建议：

      1. 刚开始学的时候会发现Flutter和很多语法不一样,导致自己会失去学下去的信心，这时候一定不要放弃，一定要在感觉学不下去的时候放松一下。
      2. 我想很多人都是学了Vue或者React等一些前端框架之后再来进阶学习Flutter框架,这里就会导致Flutter的语法与其他的语法有着很大的差距，因此,初学者就要花费很多的时间和不断的去适应这个语法，才能以最快的速度去适应。
      3. 遇到问题多看Flutter官方文档,不要气馁。
      4. 希望初学者都能学有所成，（博主学这个的时候也磨合了一段时间）

      flutter基础

      2.1 Dart语言

      Dart语言是flutter语言的基础,一定要去过一下。如果你有Java的基础,这里基本可以省略。

      //构造函数就是我们在实例化类的时候自动触发得方法
      class Persion {
        String name = 'aa';
        int age = 1;
        //  默认构造器函数
        /*Persion(String name, int age) {
            this.name = name;
            this.age = age;
        }*/
        //默认构造器函数简写
        Persion(this.name, this.age);
        //命名构造函数
        Persion.now(){
          print('我是一个普通命名构造函数');
          var date = new DateTime.now();
          print('当前时间:{$date}');
        }
        void printInfo() {
          print('${this.name}-----------${this.age}');
        }
      }
      void main() {
        Persion p1 = new Persion('小红', 18);
        p1.printInfo();
        Persion p2 = new Persion('大红', 19);
        p2.printInfo();
        Persion now = new Persion.now();
      }
      

      2.2 初识Flutter

      • 1、MaterialApp

        MaterialApp是一个方便的Widget，它封装了应用程序实现Material Design所需要的一些Widget。一般作为顶层widget使用。

      • 2、Scaffold

        Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet

        的API。

        

        2.3 GridView网格布局组件介绍

        • GridView网格布局

          GridView网格布局在实际项目中用的也是非常多的，当我们想让可以滚动的元素使用矩阵方式排列的时候。此时我们可以用网格列表组件GridView实现布局。

          class HomePage extends StatelessWidget {
            const HomePage({Key? key}) : super(key: key);
            List _getListData() {
              List list = [];
              for (var i = 0; i  
          2.4 弹性布局（Flex Expanded）
           
          

          • 弹性布局（Flex Expanded）

            Row 和 Column 都继承自 Flex ，参数基本相同，所以能使用Flex的地方基本上都可以使用 Row 或 Column 。 Flex 本身功能是很强大的，它也可以和

            Expanded 组件配合实现弹性布局 。

            import 'package:flutter/material.dart';
            void main() => runApp(const MyApp());
            class MyApp extends StatelessWidget {
              const MyApp({super.key});
              @override
              Widget build(BuildContext context) {
                return MaterialApp(
                  title: 'Material App',
                  home: Scaffold(
                      appBar: AppBar(
                        title: const Text('水平弹性布局'),
                      ),
                      body: const HomePage()),
                );
              }
            }
            class HomePage extends StatelessWidget {
              const HomePage({super.key});
              @override
              Widget build(BuildContext context) {
                return Flex(
                  direction: Axis.horizontal,
                  children: [
                    Expanded(
                        flex: 2,
                        child: IconContainer(
                          Icons.home,
                          color: Colors.green,
                        )),
                    Expanded(
                      flex: 1,
                      child: IconContainer(
                        Icons.search,
                        color: Colors.orange,
                      ),
                    )
                  ],
                );
              }
            }
            class IconContainer extends StatelessWidget {
              Color color;
              double size;
              IconData icon;
              IconContainer(this.icon,
                  {super.key, this.color = Colors.red, this.size = 32});
              @override
              Widget build(BuildContext context) {
                return Container(
                  height: 100,
                  width: 100,
                  color: color,
                  child: Center(
                    child: Icon(
                      icon,
                      size: size,
                      color: Colors.blueGrey,
                    ),
                  ),
                );
              }
            }
            

            2.5 Stack层叠组件

            • Stack

              Stack表示堆的意思，我们可以用Stack或者Stack结合Align或者Stack结合 Positiond来实现页面的定位 布局

              2.6 Wrap组件

              • Wrap组件

                Wrap可以实现流布局，单行的Wrap跟Row表现几乎一致，单列的Wrap则跟Column表现几乎一致。但

                Row与Column都是单行单列的，Wrap则突破了这个限制，mainAxis上空间不足时，则向crossAxis上

                去扩展显示。

                

                持续更新中

                结尾

                本文章会持续更新，多多点赞多多支持小猿，你们点赞和收藏是小猿的动力，爱你们。