基本的Material Design布局结构

时间：2021-10-20 05:28:18

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

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

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

基本的Material Design布局结构

从上图来看，脚手架里能添加的东西还是比较多的，您可以先从最常用的应用栏（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: <Widget>[
new IconButton(
icon: new Icon(Icons.grade),
onPressed: (){ print('收藏'); },
            ),
new IconButton(
icon: new Icon(Icons.share),
onPressed: (){ print('分享'); },
            ),
          ],
        ),
      ),
    ),
  );
}

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

基本的Material Design布局结构

接下来再看脚手架的内容区域，这是脚手架的主要内容，显示在应用栏下方，位于浮动功能按钮（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: <Widget>[
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('你好，世界！'),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

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

基本的Material Design布局结构

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

标签：

相关文章