使用页面控制器Flutter Bloc移动页面

Question

如何使用页面控制器移动页面？

此处菜单

@override
Widget build(BuildContext context) {
final PageController pageController = PageController(
initialPage: 0,
keepPage: true,
);
// final PageController pageController = PageController();
return Scaffold(
body: SafeArea(
child: PageView(
controller: pageController,
children: [

const Center(
child: Text("Shop"),
),
const Center(
child: Text("Shop1"),
),
const Center(
child: Text("Shop2"),
),
const Center(
child: Text("Shop3"),
),
const Center(
child: Text("Shop4"),
),
],
),
),
bottomNavigationBar: const _Menu(),
);
}
}

class _Menu extends StatelessWidget {
const _Menu({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final PageController pageController = PageController(
initialPage: 0,
keepPage: true,
);
return BlocListener<MenuBloc, MenuState>(
listener: (context, state) {
if (state is MenuSelected) {
pageController.jumpToPage(state.index);
}
},
child: BlocBuilder<MenuBloc, MenuState>(
builder: (context, state) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: const Color(0XFFBFC4C7).withOpacity(0.5),
offset: const Offset(5, 8),
blurRadius: 15,
spreadRadius: 5,
),
],
color: Colors.white,
),
padding: const EdgeInsets.only(
top: 20,
bottom: 40,
right: 10,
left: 10,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
MenuItems(
onTap: () {
context.read<MenuBloc>().add(MenuSwitch(0));
},
label: "Shop",
icon: Icon(
Icons.explore,
size: 24,
color: state.index == 0
? const Color(0XFF851252)
: const Color(0XFFD4D6DD),
),
),
MenuItems(
onTap: () {
context.read<MenuBloc>().add(MenuSwitch(1));
},
label: "Shop1",
icon: Icon(
Icons.apps,
size: 24,
color: state.index == 1
? const Color(0XFF851252)
: const Color(0XFFD4D6DD),
),
),
MenuItems(
onTap: () {
context.read<MenuBloc>().add(MenuSwitch(2));
},
label: "Shop2",
icon: Icon(
Icons.signal_cellular_alt,
size: 24,
color: state.index == 2
? const Color(0XFF851252)
: const Color(0XFFD4D6DD),
),
),
MenuItems(
onTap: () {
context.read<MenuBloc>().add(MenuSwitch(3));
},
label: "Shop3",
icon: Icon(
Icons.store,
size: 24,
color: state.index == 3
? const Color(0XFF851252)
: const Color(0XFFD4D6DD),
),
),
MenuItems(
onTap: () {
context.read<MenuBloc>().add(MenuSwitch(4));
},
label: "Shop4",
icon: Icon(
Icons.account_balance_wallet,
size: 24,
color: state.index == 4
? const Color(0XFF851252)
: const Color(0XFFD4D6DD),
),
),
],
),
)
],
);
},
),
);
}
}

如何使用我拥有的页面控制器和blockbloc切换页面？

Answer 1

我认为您必须为每个页面定义每个状态，并在块中发出相同的状态，然后块侦听器才会侦听状态的变化。