Flutter通过点击另一个状态上的按钮来更改AppBottomNavigation主体

Question

我有一个适用于五种不同状态的AppBottomNavigation。在第一种状态，主屏幕，我有一个按钮。点击此按钮，状态将更改为AppBottomNavigation的第三个元素。我该如何实现这一点？我已经尝试过多次调用方法"；bottomTapped"；通过ScannderDummy索引为2。遗憾的是没有成功。

app_bottomnavigation.dart

class AppBottomNavigation extends StatefulWidget {
@override
_AppBottomNavigationState createState() => _AppBottomNavigationState();
}
class _AppBottomNavigationState extends State<AppBottomNavigation> {
int _selectedIndex = 0;
List<dynamic> menuItems = [
...
];
PageController pageController = PageController(
initialPage: 0,
keepPage: true,
);
Widget buildPageView() {
return PageView(
controller: pageController,
onPageChanged: (index) {
pageChanged(index);
},
children: <Widget>[
HomeScreen(),
CategoryScreen(),
ScannerScreen(),
CategoryScreen(),
ProfileSettingsScreen(),
],
);
}
pageChanged(int index) {
setState(() {
_selectedIndex = index;
});
}
bottomTapped(int index) {
setState(() {
_selectedIndex = index;
pageController.jumpToPage(index);
});
}
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark));
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.white,
showUnselectedLabels: true,
unselectedItemColor: Colors.grey,
type: BottomNavigationBarType.fixed,
selectedLabelStyle: GoogleFonts.outfit(
textStyle:
TextStyle(height: 1.5, fontSize: 10, fontWeight: FontWeight.bold),
),
unselectedLabelStyle: GoogleFonts.outfit(
textStyle: TextStyle(
height: 1.5,
fontSize: 10,
),
),
items: menuItems.map((i) {
return BottomNavigationBarItem(
icon: (i['icon']),
activeIcon: (i['icon']),
label: i['label'],
);
}).toList(),
currentIndex: _selectedIndex,
selectedItemColor: primaryColor,
onTap: (index) {
bottomTapped(index);
},
),
body: buildPageView(),
);
}
}

scanner_dummy.dart(home_screen.dart中的元素(

class ScannerDummy extends StatelessWidget {
final AppBottomNavigation bn = new AppBottomNavigation();
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
},
child: Container(
margin:
EdgeInsets.only(top: 6, bottom: 28.0, left: 28.0, right: 28.0),
padding: EdgeInsets.symmetric(
horizontal: 16.0,
),
height: 125,
width: double.infinity,
decoration: BoxDecoration(
color: darkGrey,
borderRadius: BorderRadius.all(Radius.circular(15)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
LineIcons.retroCamera,
color: Colors.white,
size: 35.0,
),
Text(
'Artikel scannen & verkaufen',
textAlign: TextAlign.right,
style: GoogleFonts.outfit(
textStyle: TextStyle(
color: Colors.white,
fontSize: 16,
height: 2,
)),
),
],
)),
);
}
}

非常感谢你的帮助。

Answer 1

使用此小部件。我正在使用回调方法。

class ItemB extends StatefulWidget {
final VoidCallback callback;
ItemB({Key? key, required this.callback}) : super(key: key);
@override
State<ItemB> createState() => _ItemBState();
}
class _ItemBState extends State<ItemB> {
@override
Widget build(BuildContext context) {
return Column(
children: [ 
Text("B"),
ElevatedButton(
onPressed: widget.callback,
child: Text("switch Tab"),
),
],
);
}
}
class HomeWidgetX extends StatefulWidget {
const HomeWidgetX({Key? key}) : super(key: key);
@override
State<HomeWidgetX> createState() => _HomeWidgetXState();
}
class _HomeWidgetXState extends State<HomeWidgetX> {
int currentTab = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: [
Text("A"),
ItemB(
callback: () {
setState(() {
currentTab = 0;
});
},
)
][currentTab]),
bottomNavigationBar: BottomNavigationBar(
currentIndex: currentTab,
onTap: (value) {
currentTab = value;
setState(() {});
},
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.abc),
label: "",
),
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),
label: "",
),
],
),
);
}
}