其他分享
首页 > 其他分享> > Flutter 基础布局 Scaffold Widget

Flutter 基础布局 Scaffold Widget

作者:互联网

 

文章目录

 

 
Flutter 基础布局 Scaffold Widget

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

appBar
  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
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,
  ),

在这里插入图片描述

drawer
  drawer: Drawer(
    child: Drawer(
      child: DrawerHeader(
        child: Text("DrawerHeader"),
      ),
    ),
  ),

在这里插入图片描述

floatingActionButton
  floatingActionButton: FloatingActionButton(
    onPressed: null,
    child: Text("按钮"),
  ),

在这里插入图片描述

完整示例
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;
    });
  }
}

 

标签:Widget,Icons,Text,Scaffold,title,child,icon,Flutter,Icon
来源: https://blog.51cto.com/u_12956943/3038153