Question

我是新手，并且拥有一个与main.dart分离的通用appBar，因此可以在每个屏幕上使用它。这是带有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

解决方案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;
}

也可以使用enum代替String https://www.tutorialspoint.com/dart_programming/dart_programming_enumeration.htm

Answer 2

我通过以下方式做到了，希望这是正确的：在我的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),
        .....

这似乎可行...现在，我必须检查List是否包含项目并显示DropDownMenu。但我愿意接受任何建议;）

颤动的通用appBar，带有可配置的操作按钮

2 个答案: