一统天下 flutter - widget 架构类: MaterialApp - 符合 Material Design 的根组件

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

一统天下 flutter - widget 架构类: MaterialApp - 符合 Material Design 的根组件

示例如下:

lib\widget\structure\material_app.dart

/*
 * MaterialApp - 符合 Material Design 的根组件
 *
 * 一些概念的说明
 * 1、Material Design 是 Google 的设计规范
 * 2、iOS Human Interface Guidelines 是 Apple 针对 iOS 的设计规范
 * 3、Material 组件就是符合 Material Design 的一套组件,比如 Scaffold, TextButton 等
 * 4、非 Material 组件就是一般的组件,比如 Center, Text 等
 *
 * 一些 Widget 的说明
 * 1、MaterialApp 是一个符合 Material Design 的根组件
 * 2、CupertinoApp 是一个符合 iOS 设计风格的根组件(用法和 MaterialApp 差不多)
 * 3、WidgetsApp 用于为 MaterialApp 和 CupertinoApp 实现一些基本功能,一般不会直接使用这个
 *
 *
 * 注:
 * 关于 MaterialApp 的主题请参见 lib/ui/theme.dart, lib/ui/theme2.dart
 * 关于 MaterialApp 的路由请参见 lib/route/
 * 关于 MaterialApp 的国际化请参见 lib/localization/
 */

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

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

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

class _MaterialAppDemoState extends State<MaterialAppDemo> {

  bool _debugShowMaterialGrid = false;
  bool _showPerformanceOverlay = false;
  bool _showSemanticsDebugger = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      /// 应用切换时,在应用列表中此 app 显示的标题(优先使用 onGenerateTitle,如果没有定义 onGenerateTitle 则使用 title)
      title: 'the title',
      /// 应用切换时,在应用列表中此 app 显示的标题(优先使用 onGenerateTitle,如果没有定义 onGenerateTitle 则使用 title)
      onGenerateTitle: (context) {
        return "my title";
      },

      /// 右上角是否显示 debug 图标
      debugShowCheckedModeBanner: true,
      /// 是否显示基线网格
      debugShowMaterialGrid: _debugShowMaterialGrid,
      /// 是否显示性能监控浮层
      showPerformanceOverlay: _showPerformanceOverlay,
      /// 是否显示每个组件的占位大小等信息
      showSemanticsDebugger: _showSemanticsDebugger,

      /// 主页面
      home: Scaffold(
        appBar: AppBar(
          title: Text("title"),
        ),
        backgroundColor: Colors.orange,
        body: Center(
          child: MyText('hello webabcd'),
        ),
        persistentFooterButtons: [
          MyButton(
            onPressed: () {
              setState(() {
                _debugShowMaterialGrid = !_debugShowMaterialGrid;
              });
            },
            child: const Text("基线网格"),
          ),
          MyButton(
            onPressed: () {
              setState(() {
                _showPerformanceOverlay = !_showPerformanceOverlay;
              });
            },
            child: const Text("性能监控"),
          ),
          MyButton(
            onPressed: () {
              setState(() {
                _showSemanticsDebugger = !_showSemanticsDebugger;
              });
            },
            child: const Text("占位大小"),
          ),
        ],
      ),
    );
  }
}

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

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