基本的Material Design布局结构

Flutter应用的用户界面是由布局控件（不可见的）和展示控件（可见的）协同完成的，布局控件就像是建筑里的框架，而展示控件则相当于建筑里的砖瓦。展示控件按照布局控件的要求依次排列，就组成了用户所看见的界面。在Flutter应用中，最基础的布局结构是脚手架（Scaffold），例如：

import 'package:flutter/material.dart';
void main(){
  runApp(
    new MaterialApp(
      title: 'Flutter应用',
      home: new Scaffold(),
    ),
  );
}

脚手架是一个布局控件，它实现了基本的Material Design视觉布局结构。布局控件是不可见的，因此当你执行了上面代码，屏幕显示的是一片空白。现在这个脚手架正等你添砖加瓦，如下图所示：

Flutter的脚手架（Scaffold）

从上图来看，脚手架里能添加的东西还是比较多的，您可以先从最常用的应用栏（AppBar）开始入手，应用栏也叫主工具栏，位于脚手架的顶部。

Material Design的应用程序栏

在应用栏中，您能添加以下内容：

属性	添加控件	描述
title	文本（`Text`）	应用栏显示的主要控件，描述应用程序当前内容的简短文本
leading	不用添加控件	在`title`之前显示的控件，如果应用栏位于具有侧导航（`Drawer`）的脚手架中，则脚手架将使用打开侧导航的图标按钮（`IconButton`）填充该属性。如果没有侧导航并且可以返回上一个屏幕，则应用栏将使用一个调用`Navigator.maybePop`方法的返回按钮（`BackButton`）
actions	图标按钮、弹出菜单按钮（`PopupMenuButton`）	在`title`之后显示的控件，这里主要放一些常用功能的按钮
flexibleSpace	活动空间栏（`FlexibleSpaceBar`）、图片（`Image`）等控件	在应用栏后面显示的控件，它的高度与应用栏的整体高度相同
bottom	标签栏（`TabBar`）	在应用栏底部显示的控件

应用栏需要放在脚手架的appBar属性中，该属性将应用栏作为固定高度的控件放置在屏幕的顶部（如果需要可滚动的应用栏，可以使用SliverAppBar）。一个应用栏通常由一个文本和多个常用功能的图标按钮组成，例如：

import 'package:flutter/material.dart';
void main(){
  runApp(
    new MaterialApp(
      title: 'Flutter应用',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Flutter应用'),
          actions: [
            new IconButton(
              icon: new Icon(Icons.grade),
              onPressed: (){ print('收藏'); },
            ),
            new IconButton(
              icon: new Icon(Icons.share),
              onPressed: (){ print('分享'); },
            ),
          ],
        ),
      ),
    ),
  );
}

执行上面的代码，将构建以下屏幕截图的布局：

一个简单的应用程序栏

接下来再看脚手架的内容区域，这是脚手架的主要内容，显示在应用栏下方，位于浮动功能按钮（FloatingActionButton）和侧导航后面。内容区域的控件需要放在脚手架的body属性中，该属性中的控件位于应用栏和脚手架底部之间的可用空间的左上角。想要在可用空间的中心显示这个控件，可以把它放在一个居中控件（Center）中。想要扩展这个控件，可以把它放在SizedBox.expand中。

当您想展示的内容超出了屏幕时，有一部分控件可能会溢出（应用不会奔溃，但溢出的边沿会显示成红色），在这种情况下你需要使用列表视图控件（ListView）作为脚手架的body属性控件。

import 'package:flutter/material.dart';
void main(){
  runApp(
    new MaterialApp(
      title: 'Flutter应用',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Flutter应用'),
          actions: [
            new IconButton(
              icon: new Icon(Icons.grade),
              onPressed: (){ print('收藏'); },
            ),
            new IconButton(
              icon: new Icon(Icons.share),
              onPressed: (){ print('分享'); },
            ),
          ],
        ),
        body: new Center(
          child: new SizedBox(
            width: 200.0,
            height: 300.0,
            child: new Card(
              child: new Center(
                child: new Text('你好，世界！'),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

执行上面的代码，将构建以下屏幕截图的布局：

一个简单的脚手架布局

在默认情况下，脚手架的resizeToAvoidBottomPadding属性值为true，该属性设置是否自动调整body属性控件的大小，以避免脚手架底部被覆盖。例如，如果在脚手架上方显示屏幕键盘，则可调整body属性控件的大小以避免被键盘覆盖。如果你不需要此功能，可以将resizeToAvoidBottomPadding属性设置为false。更多关于脚手架的细节，请访问Flutter API文档。

基本的Material Design布局结构

你可能感兴趣的:(基本的Material Design布局结构)