Flutter 带有可配置动作按钮的颤振通用appBar_Flutter_Flutter Appbar

Flutter 带有可配置动作按钮的颤振通用appBar

flutter

Flutter 带有可配置动作按钮的颤振通用appBar,flutter,flutter-appbar,Flutter,Flutter Appbar,我不熟悉flifter，有一个公共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 Preferred

我不熟悉flifter，有一个公共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);
}

现在我需要一个行动按钮（溢出下拉菜单）在一些屏幕上。但是屏幕之间的动作是不同的。我如何定义这一点？在一个屏幕上，选择菜单中只有一个刷新，而在另一个屏幕上，有刷新、注销和具有不同路径的激活选项。在仪表板上根本没有任何动作。。。Thx提供任何帮助、建议或链接；）

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

也可以使用枚举而不是字符串

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

也可以使用枚举而不是字符串

我是按以下方式做的，希望这是正确的：在我的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;
}

导入“包装：颤振/材料.省道”；
导入“包装：voota/utils/Hex2Color.dart”；
导入“包：intl/intl.dart”；
类BaseAppBar扩展无状态小部件实现PreferredSizeWidget{
最终颜色bgColor=HexToColor（'#508bbb'）；
最后的字符串标题；
最终AppBar AppBar；
最终列表小部件；
最终列表下拉选择；
BaseAppBar（{Key-Key，this.title，this.appBar，this.widgets，this.dropdownChoices}）：超级（Key:Key）；
@凌驾
小部件构建（构建上下文）{
DateTime now=DateTime.now（）；
字符串formattedDate=DateFormat（'MMMM d，y'）。格式（现在）；
打印（'appbar.count下拉选项${dropdowntchoices.length}'）；
返回AppBar(
标题：RichText(
text:TextSpan(
文字：“VOOTA”+标题，
样式：TextStyle(
字体大小：15.0，
颜色：颜色，白色，
),
儿童：[
TextSpan（文本：'\n'），
TextSpan(
文本：formattedDate，
样式：TextStyle(
字体大小：10.0，
颜色：颜色，白色，
),
),
]),
textAlign:textAlign.center，
),
标题：对，
背景颜色：bgColor，
海拔：0，
行动：[
弹出菜单按钮(
onSelected:null，
标高：6，
itemBuilder:（构建上下文）{
返回dropdownChoices.map（（dropdownChoices选项）{
返回PopupMenuItem(
价值：选择，
子项：文本（选项.标题），
);
}).toList（）；
},
),
],
);
}
@凌驾
Size get preferredSize=>new Size.fromHeight（appBar.preferredSize.height）；
}
类下拉选择{
常量下拉选项（{this.title，this.icon}）；
最后的字符串标题；
最终的Iconda图标；
}

在需要AppBar的每个屏幕中，我导入AppBar.dart文件并将下拉选项传递给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),
        .....

类UserProfile扩展StatefulWidget{
@凌驾
_UserProfile createState（）=>\u UserProfile（）；
}
类_UserProfile扩展状态{
最终字符串标题='Profile'；
最终bgcolor=六色（'#508BB'）；
最终列表=列表（）；
最终卸载=假；
List userdropdownchoices=[
下拉选择（标题：“自行车”，图标：图标。方向和自行车），
下拉选择（标题：“汽车”，图标：图标。方向和汽车），
下拉选择（标题：“总线”，图标：Icons.directions\u Bus），
下拉选择（标题：“火车”，图标：图标。方向和铁路），
];
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:BaseAppBar（标题：title，appBar:appBar（），dropdownChoices:userdropdownchoices），
.....

这似乎有效…现在我必须检查列表是否包含项目，是否显示下拉菜单。但我愿意接受任何建议；）

我按以下方式操作，希望这是正确的：在我的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;
}

导入“包装：颤振/材料.省道”；
导入“包装：voota/utils/Hex2Color.dart”；
导入“包：intl/intl.dart”；
类BaseAppBar扩展无状态小部件实现PreferredSizeWidget{
最终颜色bgColor=HexToColor（'#508bbb'）；
最后的字符串标题；
最终AppBar AppBar；
最终列表小部件；
最终列表下拉选择；
BaseAppBar（{Key-Key，this.title，this.appBar，this.widgets，this.dropdownChoices}）：超级（Key:Key）；
@凌驾
小部件构建（构建上下文）{
DateTime now=DateTime.now（）；
字符串formattedDate=DateFormat（'MMMM d，y'）。格式（现在）；
打印（'appbar.count下拉选项${dropdowntchoices.length}'）；
返回AppBar(
标题：RichText(
text:TextSpan(
文字：“VOOTA”+标题，
样式：TextStyle(
字体大小：15.0，
颜色：颜色，白色，
),
儿童：[
TextSpan（文本：'\n'），
TextSpan(
文本：formattedDate，
样式：TextStyle(
字体大小：10.0，
颜色：颜色，白色，
),
),
]),
textAlign:textAlign.center，
),
标题：对，
背景颜色：bgColor，
海拔：0，
行动：[
弹出菜单按钮(
onSelected:null，
标高：6，
itemBuilder:（构建上下文）{
返回dropdownChoices.map（（dropdownChoices选项）{
返回PopupMenuItem(
价值：选择，
子项：文本（选项.标题），
);
}).toList（）；
},
),
],
);
}
@凌驾
Size get preferredSize=>new Size.fromHeight（a