带有可配置操作按钮的 Flutter 通用 appBar

Question

我是 Flutter 新手，有一个通用的 appBar，与 main.dart 分离，所以我可以在每个屏幕上使用它。这里是带有 appBar 的 dart 文件。

import 'package:flutter/material.dart';
import 'package:voota/utils/Hex2Color.dart';
import 'package:intl/intl.dart';

class BaseAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Color bgColor = HexToColor('#508bbb');
  final String title;
  final AppBar appBar;
  final List<Widget> widgets;

  BaseAppBar({Key key, this.title, this.appBar, this.widgets})
     : super(key: key);

  @override
  Widget build(BuildContext context) {
    DateTime now = DateTime.now();
    String formattedDate = DateFormat('MMMM d, y').format(now);

    return AppBar(
      title: RichText(
        text: TextSpan(
            text: 'VOOTA ' + title,
            style: TextStyle(
              fontSize: 15.0,
              color: Colors.white,
            ),
            children: [
              TextSpan(text: '\n'),
              TextSpan(
                text: formattedDate,
                style: TextStyle(
                  fontSize: 10.0,
                  color: Colors.white,
                ),
              ),
            ]),
        textAlign: TextAlign.center,
      ),
      centerTitle: true,
      backgroundColor: bgColor,
      elevation: 0,
      //actions: widgets,
    );
  }

  @override
  Size get preferredSize => new Size.fromHeight(appBar.preferredSize.height);
}

我简单地导入定义 appBar 的 dart 文件，因此在每个屏幕上我都有相同的 appBar，例如：

Widget build(BuildContext context) {
return Scaffold(
    appBar: BaseAppBar(title: title, appBar: AppBar()),
    ....

现在我需要一些屏幕上的操作按钮（溢出下拉菜单）。但动作因屏幕而异。我该如何定义？在一个屏幕上，选择菜单中只有一个刷新，而在另一个屏幕上，刷新和注销并激活具有不同路线的选项。而且在仪表板上根本没有任何操作...谢谢任何帮助、建议或链接；）

Answer 1

我是按以下方式完成的，希望这是正确的： 在我的 AppBar 中，我添加了一个带有 DropdownChoices 的类，并使用参数 dropdownChoices 扩展了 BaseAppBar。

import 'package:flutter/material.dart';
import 'package:voota/utils/Hex2Color.dart';
import 'package:intl/intl.dart';

class BaseAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Color bgColor = HexToColor('#508bbb');
  final String title;
  final AppBar appBar;
  final List<Widget> widgets;
  final List<DropdownChoices> dropdownChoices;

  BaseAppBar({Key key, this.title, this.appBar, this.widgets, this.dropdownChoices}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    DateTime now = DateTime.now();
    String formattedDate = DateFormat('MMMM d, y').format(now);

    print('app bar. count dropdown choices ${dropdownChoices.length}');

    return AppBar(
      title: RichText(
        text: TextSpan(
            text: 'VOOTA ' + title,
            style: TextStyle(
              fontSize: 15.0,
              color: Colors.white,
            ),
            children: [
              TextSpan(text: '\n'),
              TextSpan(
                text: formattedDate,
                style: TextStyle(
                  fontSize: 10.0,
                  color: Colors.white,
                ),
              ),
            ]),
        textAlign: TextAlign.center,
      ),
      centerTitle: true,
      backgroundColor: bgColor,
      elevation: 0,
      actions: <Widget>[
        PopupMenuButton<DropdownChoices>(
          onSelected: null,
          elevation: 6,
          itemBuilder: (BuildContext context) {
            return dropdownChoices.map((DropdownChoices choice) {
              return PopupMenuItem<DropdownChoices>(
                value: choice,
                child: Text(choice.title),
              );
            }).toList();
          },
        ),
      ],
    );
  }

  @override
  Size get preferredSize => new Size.fromHeight(appBar.preferredSize.height);
}

class DropdownChoices {
  const DropdownChoices({this.title, this.icon});

  final String title;
  final IconData icon;
}

在我需要 AppBar 的每个屏幕中，我导入 AppBar.dart 文件并将 dropdownChoices 传递给 AppBar，例如：

class UserProfile extends StatefulWidget {
  @override
  _UserProfile createState() => _UserProfile();
}

class _UserProfile extends State<UserProfile> {
  final String title = 'Profile';
  final bgcolor = HexToColor('#508bbb');
  final list = List();
  final isLoading = false;

  List<DropdownChoices> userdropdownchoices = <DropdownChoices>[
    DropdownChoices(title: 'Bike', icon: Icons.directions_bike),
    DropdownChoices(title: 'Car', icon: Icons.directions_car),
    DropdownChoices(title: 'Bus', icon: Icons.directions_bus),
    DropdownChoices(title: 'Trains', icon: Icons.directions_railway),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: BaseAppBar(title: title, appBar: AppBar(), dropdownChoices: userdropdownchoices),
        .....

这似乎工作......现在我必须检查列表是否包含项目并显示或不显示 DropDownMenu。但我愿意接受任何建议；）

Answer 2

解决方案 1

制作多个自定义 appBar。

解决方案 2

添加字符串类型

class BaseAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Color bgColor = HexToColor('#508bbb');
  final String title;
  final AppBar appBar;
  final List<Widget> widgets;
  final String type;

然后

@override
  Widget build(BuildContext context) {

IconButton iconButton;
    if(widget.type=='add'){
      iconButton =IconButton(icon: Icon(Icons.add),onPressed: (){});
    }else if(widget.type=='delete'){
      iconButton =IconButton(icon: Icon(Icons.delete),onPressed: (){});
    }
return iconButton;
}

你也可以使用枚举代替字符串 https://www.tutorialspoint.com/dart_programming/dart_programming_enumeration.htm