Flutter(2) Scaffold 用来做页面的基础开发支持

import 'package:flutter/material.dart';
import 'package:untitled/pages/People_item_page.dart';
import 'package:untitled/pages/email_item_page.dart';
import 'package:untitled/pages/home_item_page.dart';

class ScffoldHomePage extends StatefulWidget {
  const ScffoldHomePage({Key? key}) : super(key: key);

  @override
  State<ScffoldHomePage> createState() => _ScffoldHomePageState();
}

class _ScffoldHomePageState extends State<ScffoldHomePage> {
  // 当前选中的页面
  int index = 0;
  // 定义三个页面
  List<Widget> pageWidgetList = [
    HomeItemPage(),
    EmalItemPage(),
    PeopleItemPage(),
  ];

  @override
  Widget build(BuildContext context) {
    // 使用 scaffold 组件来构建应用基本页面
    return Scaffold(
      appBar: AppBar(
        title: const Text("这里是首页"),
      ),
      body:pageWidgetList[index],
      // 定义的悬浮按钮
      floatingActionButton:  FloatingActionButton(
        child: const Text("++"),
        onPressed: (){
          print("点击了 FloatingActionButton");
        },
        tooltip: "点击了 tooltip",
        //设置悬浮按钮的背景
        backgroundColor: Colors.red,
        // 获取焦点时显示的颜色
        focusColor: Colors.yellow,
        /// 水波纹颜色
        splashColor: Colors.deepPurple,
        /// 配置阴影高度
        elevation: 0.0,
        highlightElevation: 20.0,

      ),
      /// 用来控制 FloatingActionButton 的位置
      /// FloatingActionButtonLocation.endFloat 默认使用浮动右下角
      /// FloatingActionButtonLocation.endDocked 右下角
      /// FloatingActionButtonLocation.endTop 右上角
      /// FloatingActionButtonLocation.startTop 左上角
      /// FloatingActionButtonLocation.centerFloat 底部中间浮动
      /// FloatingActionButtonLocation.centerDecked 底部中间不浮动
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
       /// 左侧拉菜单页面
      drawer: Container(
        color: Colors.grey,
        width: 120,
        child: FlatButton(
            onPressed: (){
              ///打开左侧菜单
              Navigator.of(context).pop();
            },
            child: const Text("关闭左侧菜单")
        ),
      ),
      /// 右侧拉菜单页面
      endDrawer: Container(
        color: Colors.yellow,
        width: 200,
        child: FlatButton(
            onPressed: (){
              ///打开左侧菜单
              Navigator.of(context).pop();
            },
            child: const Text("关闭右侧菜单")
        ),
      ),
      // 底部导航菜单栏
      bottomNavigationBar: BottomNavigationBar(
        items: [
         /// 参数一icon 图标
        const BottomNavigationBarItem(
          icon: Icon(
            Icons.home,
            color:Colors.grey
            ),
            // 选中状态下的图标颜色
            activeIcon: Icon(
              Icons.home,
              color:Colors.blue
            ),
            label:"首页"),
        BottomNavigationBarItem(icon: Icon(Icons.email,color: index==1?Colors.blue:Colors.grey),label: "邮箱"),
        BottomNavigationBarItem(icon: Icon(Icons.people,color: index==2?Colors.blue:Colors.grey),label: "我的"),
        ],
        // 点击事件
        onTap: (flag){
          print("flag $flag");
          //index = flag;
          setState(() {
            index = flag;
          });
        },
        /// 设置当前的导航页面索引
        currentIndex: index,
      ),


    );
    
  }
}