Flutter的抽屉小部件

Drawer 小部件用作附加子路由器，它由指向同一应用程序中其他路由(即页面)的各种链接组成。它从 Scaffold 的边缘水平移动，将链接导航到flutter应用程序中的不同路线。 Drawer 小部件的所有子级通常都在ListView 中，并且最初，UI 中仅存在DrawerHeader ，当点击它时会水平延伸。

构造函数：

Syntax:
Drawer({Key key, double elevation: 16.0, Widget child, String semanticLabel}) 

特性：

• child：树中此小部件下方的小部件。
• hashCode：此对象的哈希码。
• key：控制一个小部件如何替换树中的另一个小部件。
• runtimeType：对象的运行时类型的表示。
• 海拔：放置此抽屉相对于其父级的 z 坐标。
• 语义标签：可访问性框架用于在抽屉打开和关闭时宣布屏幕转换的对话的语义标签。

重要函数：

• build (BuildContext context) → Widget：这个方法指定了widget渲染的UI部分。当Drawer小部件被插入到给定BuildContext 中的树中并且Drawer小部件的依赖关系发生变化时，将调用此方法。

执行

@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterialLocalizations(context));
  String? label = semanticLabel;
  switch (Theme.of(context).platform) {
    case TargetPlatform.iOS:
    case TargetPlatform.macOS:
      break;
    case TargetPlatform.android:
    case TargetPlatform.fuchsia:
    case TargetPlatform.linux:
    case TargetPlatform.windows:
      label = semanticLabel ?? MaterialLocalizations.of(context).drawerLabel;
  }
  return Semantics(
    scopesRoute: true,
    namesRoute: true,
    explicitChildNodes: true,
    label: label,
    child: ConstrainedBox(
      constraints: const BoxConstraints.expand(width: _kWidth),
      child: Material(
        elevation: elevation,
        child: child,
      ),
    ),
  );
}

例子：

Dart

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  static const String _title = 'Drawer Example';
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}
 
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);
 
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
 
class _MyStatefulWidgetState extends State {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
  TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List _widgetOptions = [
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];
 
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
 
  @override
  Widget build(BuildContext context) {
   return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: const [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.green,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Messages'),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Profile'),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
        ),
      ),
    );
  }
}

输出：

解释：

1. 首先，将主应用程序初始化为无状态小部件。
2. 其次，根据需要设计主要小部件。
3. 使用脚手架小部件构建Appbar 。
4. 现在在作为appbar子项的脚手架小部件的主体内使用Drawer小部件。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！