Flutter 开发学习笔记(4):widget布局容器学习

前言

再学习一个框架中，布局容器的学习是最重要的。在Html中，通过css来调整布局，在WPF中，用Grid/StackPanel/UniGrid/DockPanel等容器来嵌套布局。我其实更喜欢WPF这种方式，因为我们一般也只采用一个布局方式，多种布局方式不并存，而且布局容器只管理布局，这样更容易做业务的解耦

相关链接

Flutter 官网中文网址

给 Web 开发者的 Flutter 指南

Widget 有状态和无状态

其实我感觉这个说明不太接地气，应该是静态Widget和动态Widget。静态Widget是不能直接修改的，必须要用重新刷新更新。动态Widget是在内存里面专门划出一个空间，数据驱动修改视图。一般来说，能用静态就不用动态，动态是有实际的数据变更需求才进行声明的。

而Flutter中一切皆Widget的概念，类似于一切皆Box或者Div的概念。

Flutter 代码风格

去掉烦人的括号后缀提示

代码缩进

Flutter中的代码缩进竟然是靠【,】逗号来进行的，我都惊呆了。

Flutter 布局

Flutter 中的布局

最简单的布局

我们将main.dart改为此布局

import 'package:flutter/material.dart';

void main() {
   
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
   
    const String appTitle = 'Flutter layout demo';
    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

widgets和Material widgets

Material是谷歌旗下的UI框架，Material widgets是谷歌官方对widgets的封装。我们的示例代码用的就是Material widgets的布局。Flutter 项目默认使用。

Material App是flutter推荐的默认移动端应用布局，包含多种功能。我们作为初学者，还是以Widget原生学习为主。先学简单的UI布局。

Dark语法习惯

我非常讨厌官方这种无线套娃的嵌套地狱写法，函数的入口就是return了。我一般都喜欢拼装式的写法，就是先声明返回的内容，然后再一点一点拼起来

Flutter 布局

Flutter：Center（居中布局），Padding（填充布局），Align（对齐布局）

Flutte