Flutter框架详解

小猿_00

已于 2023-10-17 22:29:03 修改

阅读量4.4k

点赞数 4

分类专栏： Flutter 文章标签： flutter

于 2023-10-17 22:28:14 首次发布

本文链接：https://blog.csdn.net/weixin_49853850/article/details/133895027

版权

Flutter 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

文章目录

前言
flutter基础
持续更新中
结尾

前言

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

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的初学者的一些小小建议：

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

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。

Material

2.3 GridView网格布局组件介绍

GridView网格布局

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

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  List<Widget> _getListData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(Container(
        alignment: Alignment.center,
        color: Colors.blue,
        child: Text(
          '这是第$i条数据',
          style: const TextStyle(color: Colors.white, fontSize: 20),
        ),
        // height: 400, //设置高度没有反应
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisSpacing: 20.0,
      //水平子 Widget 之间间距
      mainAxisSpacing: 20.0,
      //垂直子 Widget 之间间距
      padding: const EdgeInsets.all(10),
      crossAxisCount: 2,
      //一行的 Widget 数量
      childAspectRatio: 0.8,
      //宽度和高度的比例
      children: _getListData(),
    );
  }
}

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,
        ),
      ),
    );
  }
}