Scaffold 脚手架

Scaffold 脚手架.png

• 顶部导航栏：TabBar + TabBarView + TabController
• 底部导航栏：BottomNavigationBar

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: ScaffoldRoute(),
  ));
}

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

  @override
  State createState() => _ScaffoldRouteState();
}

class _ScaffoldRouteState extends State<ScaffoldRoute>
    with SingleTickerProviderStateMixin {
  int _selectedIndex = 1;
  late TabController _tabController;
  final List<Widget> _tabs = [
    const Text("新闻"),
    const Text("历史"),
    const Text("图片"),
    const Text("语言"),
    const Text("数学"),
    const Text("外语"),
    const Text("新闻"),
    const Text("历史"),
    const Text("图片"),
    const Text("语言"),
    const Text("数学"),
    const Text("外语"),
  ];

  @override
  void initState() {
    super.initState();
    //初始 Controller
    _tabController = TabController(length: _tabs.length, vsync: this);
    _tabController.addListener(() {
      print(_tabController.index);
    });
  }

  @override
  void dispose() {
    super.dispose();
    print("dispose");
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(60),
        child: AppBar(
          //阴影大小&&阴影颜色
          elevation: 2,
          shadowColor: Colors.black54,
          centerTitle: true,
          backgroundColor: Colors.white,
          foregroundColor: Colors.deepOrange,
          title: const Text("Scaffold 脚手架"),
          leading: Builder(builder: (context) {
            return IconButton(
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              icon: const Icon(Icons.dashboard, color: Colors.deepOrange),
            );
          }),
          actions: [
            //导航栏右侧菜单
            IconButton(
                icon: const Icon(Icons.share),
                onPressed: () {
                  print("分享");
                }),
          ],
          bottom: TabBar(
              //支持滑动
              isScrollable: true,
              indicatorColor: Colors.red,
              indicatorSize: TabBarIndicatorSize.label,
              labelColor: Colors.deepOrange,
              unselectedLabelColor: Colors.orange,
              controller: _tabController,
              tabs: _tabs),
        ),
      ),
      //drawer: const MyDrawer(),
      body: TabBarView(
        controller: _tabController,
        children: _tabs.map((e) {
          //创建3个Tab页
          return Container(
            alignment: Alignment.center,
            child: e,
          );
        }).toList(),
      ),
      //底部导航
      bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        shape: const CircularNotchedRectangle(),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              icon: const Icon(Icons.home),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(Icons.add_a_photo),
              onPressed: () {},
            ),
            const SizedBox(), //中间位置空出
            IconButton(
              icon: const Icon(Icons.business),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(Icons.person),
              onPressed: () {},
            ),
          ], //均分底部导航栏横向空间
        ),
      ),
      // bottomNavigationBar: BottomNavigationBar(
      //   // 底部导航
      //   items: const [
      //     BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
      //     BottomNavigationBarItem(icon: Icon(Icons.business), label: "商业"),
      //     BottomNavigationBarItem(icon: Icon(Icons.school), label: "学校"),
      //   ],
      //   currentIndex: _selectedIndex,
      //   fixedColor: Colors.blue,
      //   onTap: _onItemTapped,
      // ),
      // 悬浮按钮
      floatingActionButton:
          FloatingActionButton(onPressed: _onAdd, child: const Icon(Icons.add)),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      print(_selectedIndex);
    });
  }

  void _onAdd() {
    print("悬浮按钮");
  }
}

class MyDrawer extends StatelessWidget {
  const MyDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: MediaQuery.removePadding(
        context: context,
        //移除抽屉菜单顶部默认留白
        removeTop: true,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 38.0),
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    child: ClipOval(
                      child: Image.asset(
                        "assets/images/fox.jpg",
                        width: 80,
                      ),
                    ),
                  ),
                  const Text(
                    "Flutter",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )
                ],
              ),
            ),
            Expanded(
              child: ListView(
                children: const [
                  ListTile(
                    leading: Icon(Icons.add),
                    title: Text('账号'),
                  ),
                  ListTile(
                    leading: Icon(Icons.settings),
                    title: Text('密码'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}