如何在 flutter 中使用状态管理切换 Appbar 标题和子内容？

Question

我有一个问题我一直在努力完成一天

我想从此动态切换应用程序栏：

对此：

当按下按钮时。 该按钮位于第一个应用栏小部件的脚手架 bottomNavigationBar 中。

我将给出这个特定小部件的代码 sn-p。

我尝试创建一个完全不同的小部件并将按钮 onTap 功能设置为路由到创建的新小部件。

这对我来说不是一个合适的解决方案，因为我希望只更改应用栏的状态以避免更改页面时出现奇怪的过渡。

另请注意，第二张图片有一个前导按钮，可以让用户返回到上一个应用栏。

我如何实现这一目标？

这是代码片段

import 'package:flutter/material.dart';
class CustomersView extends StatefulWidget {
  @override
  State<CustomersView> createState() => _CustomersViewState();
}

class _CustomersViewState extends State<CustomersView> {
  List<String> items = [
    "All",
    "Inactive",
    "One time",
    "Loyal",
    "Active",
  ];
  int current = 0;

  List<DropdownMenuItem<String>> get dropdownItems {
    List<DropdownMenuItem<String>> menuItems = [
      DropdownMenuItem(
          child: Text(
            "Today",
          ),
          value: "Today"),
    ];
    return menuItems;
  }

  @override
  Widget build(BuildContext context) {
    //final controller = Get.put(EServicesController());
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 60,
        backgroundColor: Colors.white,
        title: Text(
          "Customers".tr,
          style: GoogleFonts.poppins(
              color: Color(0xff000000),
              fontSize: 20,
              fontWeight: FontWeight.w600),
        ),
        actions: [
          SearchButtonWidget(),
          SettingsButtonWidget(),
        ],
        centerTitle: false,
        elevation: 0,
        automaticallyImplyLeading: false,
        leadingWidth: 15,
        // leading: new IconButton(
        //   icon: new Icon(Icons.arrow_back_ios, color: Color(0xff3498DB)),
        //   onPressed: () => {Get.back()},
        // ),
      ),
      body: RefreshIndicator(
        onRefresh: () async {
          // Get.find<LaravelApiClient>().forceRefresh();
          // await controller.refreshNotifications(showMessage: true);
          // Get.find<LaravelApiClient>().unForceRefresh();
        },
        child: ListView(
          primary: true,
          children: <Widget>[
            mainHeader(),
            SizedBox(
              height: 10,
            ),
            CustomersCategoriesBuilder(current: current),
          ],
        ),
      ),
      //floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,

      bottomNavigationBar: current == 0 ? SizedBox() : MessageCustomersButton(),
    );
  }

//Button that controls the appbar state
class MessageCustomersButton extends StatelessWidget {
  const MessageCustomersButton({
    Key key,
    this.value = false,
  }) : super(key: key);
  final bool value;
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: FadeInDown(
          child: MaterialButton(
            onPressed: () {
            //this is the new page route ( unsatisfied approach )
              Get.toNamed(Routes.MESSAGE_CUSTOMERS);
            },
            color: Color(0xff34495E),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20.18),
            ),
            padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
            minWidth: double.infinity,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.chat,
                  size: 18,
                  color: Colors.white,
                ),
                SizedBox(
                  width: 10,
                ),
                Text(
                  'Message Customers',
                  style: GoogleFonts.poppins(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.w600),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

尝试仅为 AppBar 创建小部件，并仅通过传递 isSecondStyleAppBar 之类的标志来处理 AppBar 的不同状态，然后在您的 CustomersView 小部件中，使用 setState 处理该标志

class CustomAppBar extends StatelessWidget {
  final bool isSecondStyleAppBar;
  const CustomAppBar(this.isSecondStyleAppBar, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const AppBar();
  }
}