Flutter自动布局生成插件auto_scaffold的使用

Flutter自动布局生成插件auto_scaffold的使用

随着屏幕尺寸的增加，抽屉式导航变得越来越普遍。在智能手机上，底部导航栏经常被使用。此插件有助于根据屏幕大小自动切换这些导航方式。

在小屏幕上可以使用底部导航栏（默认在小屏幕上）：

在小屏幕上可以使用默认抽屉（tabBarDisabled: true）：

在大屏幕上（如平板或桌面），抽屉是可折叠的，并且不会作为覆盖在内容之上的叠加层显示：

特性

• 自动根据屏幕宽度切换可折叠的抽屉（左侧位置）和底部导航栏。
• 在小设备上禁用底部导航标签栏，然后改用常规抽屉（不带折叠按钮）。
• 在桌面端鼠标悬停时显示抽屉折叠提示。
• 如果抽屉折叠，则隐藏抽屉前导。

入门指南

使用 AutoScaffold 替换 Scaffold。

在你的 Flutter 项目的 pubspec.yaml 文件中，添加以下依赖项：

dependencies:
  ...
  auto_scaffold: <latest_version>

在你的库中添加以下导入：

import 'package:auto_scaffold/app_scaffold.dart';
import 'package:auto_scaffold/navigation_item.dart';

示例

以下是一个完整的示例，展示了如何使用 auto_scaffold 插件：

class Example extends StatefulWidget {
  [@override](/user/override)
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  _ExampleState() : super();

  int _selectedPageIndex = 0;
  String _appBarTitle = 'Home';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AutoScaffold(
      appBar: AppBar(
        title: Text(_appBarTitle),
      ),
      tabBarDisabled: false, // 控制是否启用底部导航栏
      drawerLeading: Icon(Icons.favorite, color: Colors.red), // 抽屉前导图标
      drawerTitle: Text(
        'Your App',
        style: Theme.of(context).textTheme.bodyLarge,
      ), // 抽屉标题
      backgroundColor: Colors.blue.shade50, // 底色
      selectedNavigationItemColor: Colors.red, // 选中项目的颜色
      unselectedNavigationItemColor: Colors.black54, // 未选中项目的颜色
      selectedDrawerNavigationItemBackground: Colors.black12, // 选中项目的背景色
      onPageSelected: (int pageIndex) {
        setState(() {
          _selectedPageIndex = pageIndex;

          switch (_selectedPageIndex) {
            case 0:
              _appBarTitle = 'Home';
              break;
            case 1:
              _appBarTitle = 'Settings';
              break;
          }
        });
      },
      currentIndex: _selectedPageIndex, // 当前选中页面索引
      navigationItems: [
        NavigationItem(
          name: 'Home',
          icon: Icon(Icons.home),
          route: '/',
          body: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                children: [
                  Text('欢迎来到collapsible_app_scaffold示例应用。',
                      style: Theme.of(context).textTheme.headlineSmall),
                  _headline('特性'),
                  _item('自动根据屏幕宽度切换可折叠的抽屉（左侧位置）和底部导航栏'),
                  _item('在小设备上禁用底部导航标签栏，然后改用常规抽屉（不带折叠按钮）'),
                  _item('在桌面端鼠标悬停时显示抽屉折叠提示'),
                  _item('如果抽屉折叠，则隐藏抽屉前导'),
                ],
              ),
            ),
          ),
        ),
        NavigationItem(
          name: 'Settings',
          icon: Icon(Icons.settings),
          route: '/settings',
          body: Text('设置在此',
              style: Theme.of(context).textTheme.headlineSmall),
        )
      ],
    );
  }

  Widget _headline(String headline) {
    return Padding(
      padding: const EdgeInsets.only(top: 16),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text(headline, style: TextStyle(fontWeight: FontWeight.bold)),
      ),
    );
  }

  Widget _item(String item) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text('► $item'),
      ),
    );
  }
}