我如何改变appbar时，一个按钮点击扑动?

Question

我有一个小部件与AppBar:

class CustomersView extends StatefulWidget {
@override
State<CustomersView> createState() => _CustomersViewState();
}
class _CustomersViewState extends State<CustomersView> {
@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(),
);
}
}

我有另一个定制的AppBar在另一个小部件:

class MessageCustomersAppBar extends StatelessWidget with PreferredSizeWidget {
final bool isSecondStyleAppBar;
const MessageCustomersAppBar(this.isSecondStyleAppBar, {Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return 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()},
),
);
}
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

在最初的小部件中，我有一个bottomNavigationBar，它有一个按钮MessageCustomersButton()，在第二个CustomAppBar小部件中，我有一个leading

我想切换AppBar到CustomAppBar当这个按钮被按下(我正在使用Getx) &按下leading按钮后切换回原来的AppBar

我试过自己管理状态，但看起来我在过去的几天里错了。

我需要帮助。谢谢你！

Answer 1

你可以使用OBX方法改变GetX中的AppBar。下面是实现这些功能的代码。

1。视图文件

class CustomersView extends StatefulWidget {
@override
State<CustomersView> createState() => _CustomersViewState();
}
class _CustomersViewState extends State<CustomersView> {
@override
Widget build(BuildContext context) {
final controller = Get.put(AppBarController());
return Obx(
() => Scaffold(
appBar: controller.isChangeAppBar.value
? MessageCustomersAppBar()
: 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,
),
body: RefreshIndicator(
onRefresh: () async {},
child: ListView(
primary: true,
children: <Widget>[
mainHeader(),
SizedBox(
height: 10,
),
CustomersCategoriesBuilder(current: current),
],
),
),
bottomNavigationBar:
current == 0 ? SizedBox() : MessageCustomersButton(),
//here's the ontap method for the button
//   () {
// controller.isChangeAppBar.value = !controller.isChangeAppBar.value;
// }
),
);
}
}

2. 您的自定义AppBar文件保持不变。

3. GetX控制器文件:

class AppBarController extends GetxController {
Rx<bool> isChangeAppBar = false.obs;
}