Flutter 基础布局 Scaffold Widget

 

文章目录

  • Flutter 基础布局 Scaffold Widget
  • appBar
  • body
  • bottomNavigationBar
  • drawer
  • floatingActionButton
  • 完整示例

 

 
Flutter 基础布局 Scaffold Widget

顾名思义,脚手架,我们在此基础上进行搭建组建进行布局,只要是在 Material 中定义的单个界面显示的 Widget 都可以使用它,它提供了诸如:抽屉(drawers)底部按钮(bottom sheets)和 底部通知(snack bars),你可以认为它是一基本快速实现某些布局的容器 Widget。

appBar
  • title 导航
  appBar: AppBar(
    //导航标题
    title: Text('Scaffold Title'),
    //阴影大小
    elevation: 10,
    //导航栏右侧菜单
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.shopping_cart), tooltip: "购物", onPressed: null)
    ],
    //标题是否剧中
    centerTitle: true,
    //导航栏左侧按钮
    leading: IconButton(
        icon: Icon(Icons.menu), tooltip: "菜单", onPressed: null),
    //导航栏为空时,是否自动实现默认leading
    automaticallyImplyLeading: true,
  ),

Flutter 基础布局 Scaffold Widget

body
  • 内容部分
body: Text("body data"),
bottomNavigationBar
  • 底部导航部分
  bottomNavigationBar: BottomNavigationBar(
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
      BottomNavigationBarItem(
          icon: Icon(Icons.business), title: Text("Business")),
      BottomNavigationBarItem(
          icon: Icon(Icons.school), title: Text("School")),
    ],
    currentIndex: _selectedIndex,
    fixedColor: Colors.blue,
    onTap: _onItemTap,
  ),

Flutter 基础布局 Scaffold Widget

drawer
  • 侧滑菜单部分
  drawer: Drawer(
    child: Drawer(
      child: DrawerHeader(
        child: Text("DrawerHeader"),
      ),
    ),
  ),

Flutter 基础布局 Scaffold Widget

floatingActionButton
  • 底部悬浮按钮
  floatingActionButton: FloatingActionButton(
    onPressed: null,
    child: Text("按钮"),
  ),

Flutter 基础布局 Scaffold Widget

完整示例
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ScaffoldExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScaffoldExampleState();
  }
}

class ScaffoldExampleState extends State<ScaffoldExample> {
  int _selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //导航标题
        title: Text('Scaffold Title'),
        //阴影大小
        elevation: 10,
        //导航栏右侧菜单
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.shopping_cart), tooltip: "购物", onPressed: null)
        ],
        //标题是否剧中
        centerTitle: true,
        //导航栏左侧按钮
        leading:
            IconButton(icon: Icon(Icons.menu), tooltip: "菜单", onPressed: null),
        //导航栏为空时,是否自动实现默认leading
        automaticallyImplyLeading: true,
      ),
      body: Text("body data"),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
          BottomNavigationBarItem(
              icon: Icon(Icons.business), title: Text("Business")),
          BottomNavigationBarItem(
              icon: Icon(Icons.school), title: Text("School")),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.blue,
        onTap: _onItemTap,
      ),
      drawer: Drawer(
        child: Drawer(
          child: DrawerHeader(
            child: Text("DrawerHeader"),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: null,
        child: Text("按钮"),
      ),
    );
  }
  void _onItemTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

 

上一篇:echarts


下一篇:echarts图例换行时icon对齐方式