Flutter 脚手架组件

Flutter 脚手架组件(Scaffold)Scaffold实现了基本的Material Design布局。只要是在Material Design中定义过的单个界面显示的布局组件元素,都可以使用Scaffold来绘制。

Scaffold组件常见属性如表所示:
Flutter 脚手架组件(Scaffold)

示例代码如下:

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    title: 'Scaffold脚手架组件示例',
    home: LayoutDemo(),
  ),
);

class LayoutDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 头部元素,比如:左侧返回按钮,中间标题,右侧菜单
      appBar: AppBar(
        title: Text('Scaffold脚手架组件示例'),
      ),
      // 视图内容部分,通常作为应用页面的主显示区域
      body: Center(
        child: Text('Scaffold'),
      ),
      // 底部导航栏
      bottomNavigationBar: BottomAppBar(
        child: Container(height: 50.0,),
      ),
      // 添加FAB按钮
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: '增加',
        child: Icon(Icons.add),
      ),
      // FAB按钮居中展示
      floatingActionButtonLocation: FloatingAction-
ButtonLocation.centerDocked,
    );
  }
}

上述示例代码的视图展现大致如图所示:
Flutter 脚手架组件(Scaffold)

赞(0)

评论 抢沙发

评论前必须登录!