您好，我正在使用 flutter 开发移动应用程序，如果我遵循的策略正确，我会感到有些困惑？

Question

我创建了一个名为 CustomAppBar 的独立无状态小部件，将某些参数。 我的应用程序中每一个都需要 appBar。我将使用 CustomAppBar 并提供所需的参数，而不是普通的 AppBar。

像这样：

 appBar: PreferredSize(
        preferredSize: const Size.fromHeight(50),
        child: CustomAppBar(title: 'Wishlist', enableBack: widget.enableBack),
      ),

我想知道这种方法是否正确，或者它是否会对性能和应用程序崩溃产生任何影响。

非常感谢您的帮助。谢谢。

请检查下面的代码 (CustomAppBar):

class CustomAppBar extends StatelessWidget {
  bool enableBack;
  String title;
  Color backgroundColor;
  bool enableSearchBar;
  bool showLogo;
  bool isSearchPage;

  CustomAppBar(
      {Key key,
      this.enableBack = true,
      this.title,
      this.backgroundColor = Colors.white,
      this.enableSearchBar = false,
      this.showLogo = false,
      this.isSearchPage = false})
      : super(key: key);

  // const CustomAppBar({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
        elevation: 0,
        leading: enableBack
            ? GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: const Icon(
                  Icons.arrow_back,
                  color: Colors.white,
                  size: 18,
                ),
              )
            : const SizedBox(),
        centerTitle: enableBack ? false : true,
        backgroundColor: const Color(0xff004aad),
        titleSpacing: 0,
        leadingWidth: 50,
        title: showLogo
            ? Row(
                children: [
                  const Padding(
                    padding: EdgeInsets.only(left: 0),
                    child: Image(
                      height: 35,
                      width: 35,
                      // width: 400,
                      image: AssetImage(
                          'assets/images/featured_images/logo-transparent.png'),
                      fit: BoxFit.contain,
                    ),
                  ),
                  const SizedBox(
                    width: 5,
                  ),
                  CustomSizedTextBox(
                    textContent: "TITLE",
                    color: Colors.white,
                    fontSize: 25,
                    fontName: 'Alegreya Sans',
                  ),
                ],
              )
            : Text(
                title,
                style: const TextStyle(color: Colors.white, fontSize: 15),
              ),
        actions: enableSearchBar
            ? [
                Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 12),
                    child: GestureDetector(
                      onTap: () {
                        isSearchPage
                            ? Navigator.pop(context)
                            : Navigator.pushNamed(context, '/search');
                      },
                      child: const Icon(
                        CupertinoIcons.search,
                        color: Colors.white,
                      ),
                    )),
                Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                  child: GestureDetector(
                    onTap: () {
                      Navigator.pushNamed(context, '/wishlist');
                    },
                    child: const Icon(
                      CupertinoIcons.heart,
                      color: Colors.white,
                    ),
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                  child: GestureDetector(
                    onTap: () {
                      Navigator.pushNamed(context, '/cart',
                          arguments: Cart(
                            enableBack: true,
                          ));
                    },
                    child: const Icon(
                      CupertinoIcons.bag,
                      color: Colors.white,
                    ),
                  ),
                ),
              ]
            : []);
  }
}

Answer 1

这是一种方法，没有错。

实现自定义应用栏的另一种常用方法是在 CustomAppBar:

中实现 PreferredSizeWidget

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  bool enableBack;
  String title;
  Color backgroundColor;
  bool enableSearchBar;
  bool showLogo;
  bool isSearchPage;

  @override
  Size get preferredSize => const Size.fromHeight(50);

  CustomAppBar(
      {Key key,
      this.enableBack = true,
      this.title,
      this.backgroundColor = Colors.white,
      this.enableSearchBar = false,
      this.showLogo = false,
      this.isSearchPage = false})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

现在您可以像原来的 AppBar 一样使用您的 CustomAppBar:

appBar: CustomAppBar(title: 'Wishlist', enableBack: widget.enableBack),