第三节: Flutter中MaterialApp/Scaffold组件调整上节示例

MaterialApp 和 Scaffold 两个组件

上一小节,提到了Flutter提供了一套丰富的Material组件,可以让我们使用Material Design风格

使用Material Design风格的Widget说明

如果想使用Material Design风格的Widget,就比如使用MaterialApp组件
MaterialApp组件Flutter Widget的根组件

接下来就来先看看MaterialApp

1 MaterialApp

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

1.1 MaterialApp 属性

MaterialApp Widget源码中有很多属性:如下

const MaterialApp({
    Key key,
    this.navigatorKey,
    this.home,
    this.routes = const <String, WidgetBuilder>{},
    this.initialRoute,
    this.onGenerateRoute,
    this.onGenerateInitialRoutes,
    this.onUnknownRoute,
    this.navigatorObservers = const <NavigatorObserver>[],
    this.builder,
    this.title = '',
    this.onGenerateTitle,
    this.color,
    this.theme,
    this.darkTheme,
    this.themeMode = ThemeMode.system,
    this.locale,
    this.localizationsDelegates,
    this.localeListResolutionCallback,
    this.localeResolutionCallback,
    this.supportedLocales = const <Locale>[Locale('en', 'US')],
    this.debugShowMaterialGrid = false,
    this.showPerformanceOverlay = false,
    this.checkerboardRasterCacheImages = false,
    this.checkerboardOffscreenLayers = false,
    this.showSemanticsDebugger = false,
    this.debugShowCheckedModeBanner = true,
    this.shortcuts,
    this.actions,
  })

学过了dart,都知道这里的参数每一个都可以省略.但在想一下,如果都省略了使用这个Widget将没有什么意义了.

这里有很多属性,我们先认识一下常用的属性,其他的属性以后用到了,在说,不用可以的去记;

1.2 MaterialApp常用的属性

title ：在任务管理窗口中所显示的应用名字
theme ：应用各种 UI 所使用的主题颜色
color ：应用的主要颜色值（primary color），也就是安卓任务管理窗口中所显示的应用颜色
home ：应用默认所显示的界面 Widget
routes ：应用的顶级导航表格，这个是多页面应用用来控制页面跳转的，类似于网页的网址

2. Scaffold

2.1 Scaffold 了解

Scaffoid(脚手架)说明:

一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等
Scaffold是一个路由页的骨架，我们使用它可以很容易地拼装出一个完整的页面。

2.2 Scaffold 主要的属性

appBar 显示在界面顶部的一个AppBar
body 当前界面所显示的主要内容 Widget
drawer 抽屉菜单控件

先认识这些属性,通过这些属性修改上一小节的实例:

之后了解过更改Flutter组件后在细谈这些属性

2.3 将内容再次抽离为组件

实例:

import 'package:flutter/material.dart';

void main() {
    runApp(App());
}

// App 就是我们自定义的类(也可以叫组件),这个类覆写了无状态抽象类
class App extends StatelessWidget{
    @override
    Widget build(BuildContext context){
        // 返回一个组件
        return MaterialApp(
            title:"nihao ",
            home: Scaffold(
                appBar: AppBar(
                    title:Text("欢迎来到Flutter")
                ),
                body: Home()
            ),

        );
    }
}

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Text(
                "你好,Flutter",                   // 文本内容
                textDirection: TextDirection.ltr,  // 文字的显示方向
                // 处理了文字样式
                style: TextStyle(
                    fontSize: 40,            // 文字的大小
                    color: Colors.blue     // 文字的颜色
                )

            )
        );
    }
}

修改示例图.png

此时背景就不在像上一小节那样黑乎乎的.