在横向模式下将Flutter BottomNavigationBar放置在左侧,可以通过自定义布局和使用Stack组件来实现。
以下是一种实现方式:
class CustomBottomNavigationBar extends StatefulWidget {
@override
_CustomBottomNavigationBarState createState() =>
_CustomBottomNavigationBarState();
}
class _CustomBottomNavigationBarState
extends State<CustomBottomNavigationBar> {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Offstage(
offstage: _currentIndex != 0,
child: _buildPage1(),
),
Offstage(
offstage: _currentIndex != 1,
child: _buildPage2(),
),
Offstage(
offstage: _currentIndex != 2,
child: _buildPage3(),
),
],
),
bottomNavigationBar: Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
_currentIndex = 0;
});
},
child: Container(
color: _currentIndex == 0 ? Colors.blue : Colors.transparent,
child: Center(
child: Text(
'Page 1',
style: TextStyle(
color: _currentIndex == 0 ? Colors.white : Colors.black,
),
),
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
_currentIndex = 1;
});
},
child: Container(
color: _currentIndex == 1 ? Colors.blue : Colors.transparent,
child: Center(
child: Text(
'Page 2',
style: TextStyle(
color: _currentIndex == 1 ? Colors.white : Colors.black,
),
),
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
_currentIndex = 2;
});
},
child: Container(
color: _currentIndex == 2 ? Colors.blue : Colors.transparent,
child: Center(
child: Text(
'Page 3',
style: TextStyle(
color: _currentIndex == 2 ? Colors.white : Colors.black,
),
),
),
),
),
),
],
),
);
}
Widget _buildPage1() {
return Container(
color: Colors.red,
child: Center(
child: Text(
'Page 1',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
);
}
Widget _buildPage2() {
return Container(
color: Colors.green,
child: Center(
child: Text(
'Page 2',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
);
}
Widget _buildPage3() {
return Container(
color: Colors.blue,
child: Center(
child: Text(
'Page 3',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
);
}
}
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter BottomNavigationBar'),
),
body: CustomBottomNavigationBar(),
);
}
}
这样,就可以在横向模式下将Flutter BottomNavigationBar放置在左侧。通过点击底部的不同按钮,可以切换显示不同的页面内容。
请注意,以上代码仅为示例,您可以根据实际需求进行修改和优化。
领取专属 10元无门槛券
手把手带您无忧上云