Flutter循序渐进=＞程序结构

聊个一毛钱的

焦二喜欢问别人怎么发财，当别人为他指路，比如学技术或者开公司啥的，他却说：“我想知道的是怎么发财，不是学技术或者开公司这种。”我不想做焦二，还知道Flutter就是Dart写的，还是踏踏实实学Dart吧，虽然深爱Python的我痛恨括号，看在Flutter面子上，姑且忍了。

用组件（widget）搭建用户界面，跟搭积木一样，组件状态改变，就重新build显示，runApp把Center当成组件树的根，Center还有个child，Text组件。所有的组件都有两个亚当和夏娃一样的祖宗，StatelessWidget和StatefulWidget。组件的功能就是build()，然后渲染成用户界面。

组件出来站队了！Text搞文字的；行和列Row, Column, Stack是叠罗汉的；Container，容器，就是用来装东西的。

结构图

有了这个结构图，程序的可读性就好多了。总共两大家族MyAppBar和MyScaffold。

MyAppBar组件创造了一个容器Container。容器里面有三个小孩children，这三个小孩children站成一排Row。老大IconButton（菜单），老二title组件（安远投资），还是expanded模式，意思是那排空余的位置都给他；老三搜索。

MyScaffold组件让他的小孩站成一列Column。老大居然是第一家族的MyAppBar，用Text组件给它取名字，（为啥这样？现在还不懂）也让Center组件尽量膨胀。

最后，main程序有个小孩MaterialApp，指定主页为MyScaffold，SafeArea的官方解释是创建一个屏蔽操作系统界面的组件。

效果图

源代码（来源于Flutter官网）

学官方文档是最好的，毕竟Flutter就是他们做的，他们最有发言权！

import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget {
  const MyAppBar({required this.title, super.key});

  // Fields in a Widget subclass are always marked "final".

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8),
      decoration: const BoxDecoration(color: Color.fromARGB(255, 245, 172, 15)),
      // Row is a horizontal, linear layout.
      child: Row(
        children: [
          const IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null disables the button
          ),
          // Expanded expands its child
          // to fill the available space.
          Expanded(
            child: title,
          ),
          const IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // Material is a conceptual piece
    // of paper on which the UI appears.
    return Material(
      // Column is a vertical, linear layout.
      child: Column(
        children: [
          MyAppBar(
            title: Text(
              '安远投资',
              style: Theme.of(context) //
                  .primaryTextTheme
                  .titleLarge,
            ),
          ),
          const Expanded(
            child: Center(
              child: Text(
                '主投纯债基金，纳斯达克100和标普500指数基金！',
                style: TextStyle(color: Colors.red, fontSize: 20),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'My app', // used by the OS task switcher
      home: SafeArea(
        child: MyScaffold(),
      ),
    ),
  );
}