一统天下 flutter - widget 架构类: Scaffold - 脚手架

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 架构类: Scaffold - 脚手架

示例如下:

lib\widget\structure\scaffold.dart

/*
 * Scaffold - 脚手架
 *
 * Scaffold 用于组织界面布局,其包含了一个经典页面的所有组织结构
 */

import 'package:flutter/material.dart';
import 'package:flutter_demo/helper.dart';

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

  @override
  _ScaffoldDemoState createState() => _ScaffoldDemoState();
}

class _ScaffoldDemoState extends State<ScaffoldDemo> {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData().copyWith(
        /// 默认主题,会在 persistentFooterButtons 的上面显示一条分隔线,通过如下方式可以隐藏这个分隔线
        dividerColor: Colors.transparent,
      ),
      child: Scaffold(
        body: const MyText("body"),                         /// 主体内容
        appBar: _appBar(),                                  /// 顶部导航栏,一个 PreferredSizeWidget 对象,请参见 scaffold_app_bar.dart
        bottomNavigationBar: _bottomNavigationBar(),        /// 底部导航栏,一个 Widget 对象,请参见 scaffold_bottom_navigation_bar.dart
        drawer: _drawer(),                                  /// 左侧抽屉(侧滑菜单),请参见 scaffold_drawer.dart
        endDrawer: _endDrawer(),                            /// 右侧抽屉(侧滑菜单),请参见 scaffold_drawer.dart

        extendBody: false,                                  /// body 内容是否延伸到底部(即底部导航栏是否要覆盖 body 内容)
        extendBodyBehindAppBar: false,                      /// body 内容是否延伸到顶部(即顶部导航栏是否要覆盖 body 内容)

        persistentFooterButtons: <Widget>[                          /// 底部导航栏上面的一组 widget
          Container(width: 100, height: 20, color: Colors.red,),
          Container(width: 100, height: 20, color: Colors.green,),
          Container(width: 100, height: 20, color: Colors.blue,),
        ],
        persistentFooterAlignment: AlignmentDirectional.center,     /// 底部导航栏上面的一组 widget 的对齐方式

        /// 注:可以为 floatingActionButton 指定任意类型的 widget
        floatingActionButton: Builder(                              /// 悬浮按钮,请参见 scaffold_floating_action_button.dart
          builder: (BuildContext context) {
            return FloatingActionButton(
              child: Text('show'),
              onPressed: () {
                Scaffold.of(context).showBottomSheet((context) {    /// 弹出 BottomSheet(下滑可消失),请参见 scaffold_bottom_sheet.dart
                  return Container(
                    height: 200,
                    color: Colors.red,
                    alignment: Alignment.center,
                    child: TextButton(
                      child: const MyText("close"),
                      onPressed: () {
                        /// 关闭当前的 BottomSheet
                        Navigator.of(context).pop();
                      },
                    ),
                  );
                });
              },
            );
          },
        ),

        backgroundColor: Colors.orange,   /// 背景色
        resizeToAvoidBottomInset: true,   /// 设置为 true 则会自动滚动,以避免弹出的软键盘遮住输入框的问题
      ),
    );
  }

  AppBar _appBar() {
    return AppBar(
      title: const Text('AppBar'),
    );
  }

  BottomNavigationBar _bottomNavigationBar() {
    return BottomNavigationBar(
      items: const [
        BottomNavigationBarItem(
          label: 'home',
          icon: Icon(Icons.home),
        ),
        BottomNavigationBarItem(
          label: 'favorite',
          icon: Icon(Icons.favorite),
        ),
      ],
    );
  }

  Drawer _drawer() {
    return Drawer(
      backgroundColor: Colors.yellow,
    );
  }

  Drawer _endDrawer() {
    return Drawer(
      backgroundColor: Colors.purple,
    );
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

posted @ 2023-03-22 10:35  webabcd  阅读(155)  评论(0编辑  收藏  举报