学习Flutter(3)

今天搞个简单的demo

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: 'First Demo',
    home: FirstHome(),
  ));
}

class FirstHome extends StatelessWidget {
  const FirstHome({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const IconButton(
          onPressed: null,
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
        ),
        title: const Text("Example title"),
        actions: const [
          IconButton(
            onPressed: null,
            icon: Icon(Icons.search),
            tooltip: 'Search',
          ),
        ],
      ),
      body: const Center(
        child: Text('Hello world'),
      ),
      floatingActionButton: const FloatingActionButton(
        onPressed: null,
        tooltip: 'Add',
        child: Icon(Icons.add),
      ),
    );
  }
}

(

效果图
)
这是官网上的栗子，这是一个Material 应用，以 MaterialAppwidget 开始，它在你的应用的底层下构建了许多有用的 widget。

MaterialApp 代表使用纸墨设计（Material Design）风格的应用。里面包含了纸墨设计风格应用所需要的基本控件。
MaterialApp 主要属性如下：
title ： 在任务管理窗口中所显示的应用名字
theme ： 应用各种 UI 所使用的主题颜色
color ： 应用的主要颜色值（primary color），也就是安卓任务管理窗口中所显示的应用颜色
home ： 应用默认所显示的界面 Widget
routes ： 应用的顶级导航表格，这个是多页面应用用来控制页面跳转的，类似于网页的网址
initialRoute ：第一个显示的路由名字，默认值为 Navigator.defaultRouteName
onGenerateRoute ： 生成路由的回调函数，当导航的命名路由的时候，会使用这个来生成界面
onLocaleChanged ： 当系统修改语言的时候，会触发这个回调
navigatorObservers ： 应用 Navigator 的监听器
debugShowMaterialGrid ： 是否显示 纸墨设计 基础布局网格，用来调试 UI 的工具
showPerformanceOverlay ： 显示性能标签
debugShowCheckedModeBanner ：是否显示右上角DEBUG标签 （调试开关）
checkerboardRasterCacheImages ：检查缓存的图像开关，检测在界面重绘时频繁闪烁的图像（调试开关）
showSemanticsDebugger ：是否打开Widget边框，类似Android开发者模式中显示布局边界（调试开关）
下面将介绍重要的几个属性。

代码中的Scaffold是脚手架，实现了基本的 Material Design 可视化布局结构
const Scaffold({
Key key,
this.appBar, // 标题栏
this.body, // 用于显示当前界面主要内容的Widget
this.floatingActionButton, // 一个悬浮在body上的按钮，默认显示在右下角
this.floatingActionButtonLocation, // 用于设置floatingActionButton显示的位置
this.floatingActionButtonAnimator, // floatingActionButton移动到一个新的位置时的动画
this.persistentFooterButtons, // 多状态按钮
this.drawer, // 左侧的抽屉菜单
this.endDrawer, // 右'侧的抽屉菜单
this.bottomNavigationBar,// 底部导航栏。
this.bottomSheet, // 显示在底部的工具栏
this.backgroundColor,// 内容的背景颜色
this.resizeToAvoidBottomPadding = true, // 控制界面内容 body 是否重新布局来避免底部被覆盖，比如当键盘显示的时候，重新布局避免被键盘盖住内容。
this.primary = true,// Scaffold是否显示在页面的顶部
})

参考链接: https://flutter.cn/docs/ui/widgets-intro
https://www.jianshu.com/p/e4aa45ff08d6
https://www.jianshu.com/p/4ad3ed402aec