自定义 bottomNavigationBar 帮助需要在 flutter 中调用页面进入视图
问题描述 投票：0回答：2
我有一个代码的工作页面，我想为我的投资组合修改。我使用这个 YouTube https://youtu.be/1ToqYMSnNhA 和 git https://github.com/retroportalstudio/flutter_bnb_v2 来制作我的设计，但现在我无法调用我的页面。
我使用的工作代码...
circular_bottom_navigation: ^2.3.0
class MainScreenScaffold extends StatefulWidget {
const MainScreenScaffold({Key? key}) : super(key: key);
@override
State<MainScreenScaffold> createState() => _MainScreenScaffoldState();
}
bool value = false;
class _MainScreenScaffoldState extends State<MainScreenScaffold> {
late List<Map<String, Object>> _pages;
int _selectedPageIndex = 2;
@override
void initState() {
_pages = [
{
'page': Abilities(),
},
{
'page': Education(),
},
{
'page': HomePage(),
},
{
'page': Employment(),
},
{
'page': About(),
},
];
super.initState();
}
void _selectPage(int index) {
setState(() {
_selectedPageIndex = index;
});
}
bool _onTap = false;
@override
Widget build(BuildContext context) {
final themeState = Provider.of<DarkThemeProvider>(context);
return Scaffold(
appBar: AppBar(
toolbarHeight: 40,
backgroundColor: Theme.of(context).brightness == Brightness.dark ? navigationBarsDMColor : navigationBarsLMColor,
elevation: Theme.of(context).brightness == Brightness.dark ? 0.0 : 3.0,
actions: <Widget>[
IconButton(
icon: FaIcon(
themeState.darkTheme
? FontAwesomeIcons.lightbulb
: FontAwesomeIcons.lightbulb,
size: 20,
color: _onTap ? Colors.black : Colors.white),
tooltip: 'Light/Dark Mode',
onPressed: () {
themeState.darkTheme = value;
setState(() {
value = !value;
_onTap = !_onTap;
});
},
),
],
leading: Builder(
builder: (context) => IconButton(
onPressed: () {
Scaffold.of(context).openDrawer();
},
icon: FaIcon(
themeState.darkTheme
? FontAwesomeIcons.bars
: FontAwesomeIcons.bars,
size: 20,
color: _onTap ? Colors.black : Colors.white),
tooltip: 'Quick Look',
color: Colors.grey,
),
),
centerTitle: true,
title: AnimatedCapsuleButton(
onPressed: () {
// Open the webpage here
},
darkModeColor: yellowDMColor,
lightModeColor: yellowLMColor,
text: 'Resume',
),
),
drawer: SkillsPageDrawer(),
body: _pages[_selectedPageIndex]['page'] as Widget,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 0.1,
clipBehavior: Clip.antiAlias,
child: Container(
height: kBottomNavigationBarHeight * 1.1,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 50.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).brightness == Brightness.dark ? orangeDMColor : orangeLMColor,
),
child: IconButton(
icon: Icon(Icons.bar_chart, color: Colors.white),
onPressed: () => _selectPage(0),
tooltip: 'Abilities',
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).brightness == Brightness.dark ? greenDMColor : greenLMColor,
),
child: IconButton(
icon: Icon(Icons.school, color: Colors.white),
onPressed: () => _selectPage(1),
tooltip: 'Education',
),
),
SizedBox(width: 48), // This empty space is for the FAB.
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).brightness == Brightness.dark ? purpleDMColor : purpleLMColor,
),
child: IconButton(
icon: Icon(Icons.work, color: Colors.white),
onPressed: () => _selectPage(3),
tooltip: 'Employments',
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).brightness == Brightness.dark ? magentaDMColor : magentaLMColor,
),
child: IconButton(
icon: Icon(Icons.person, color: Colors.white),
onPressed: () => _selectPage(4),
tooltip: 'About',
),
),
],
),
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.miniCenterDocked,
floatingActionButton: Container(
height: 70.0,
width: 70.0,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: FloatingActionButton(
backgroundColor: Theme.of(context).brightness == Brightness.dark ? blueDMColor : blueLMColor,
foregroundColor: Colors.black,
hoverElevation: 10,
splashColor: Colors.blueGrey,
tooltip: 'Home',
elevation: 4,
child: FaIcon(
themeState.darkTheme
? FontAwesomeIcons.houseChimney
: FontAwesomeIcons.houseChimney,
color: _onTap ? Colors.white : Colors.white),
onPressed: () => setState(() {
_selectedPageIndex = 2;
}),
),
),
),
);
}
}
不工作
class MainScreenScaffold3 extends StatefulWidget {
const MainScreenScaffold3({Key? key}) : super(key: key);
@override
State<MainScreenScaffold3> createState() => _MainScreenScaffold3State();
}
bool value = false;
class _MainScreenScaffold3State extends State<MainScreenScaffold3> {
late List<Map<String, Object>> _pages;
int _selectedPageIndex = 2;
@override
void initState() {
_pages = [
{
'page': Abilities(),
},
{
'page': Education(),
},
{
'page': HomePage(),
},
{
'page': Employment(),
},
{
'page': About(),
},
];
super.initState();
}
void _selectPage(int index) {
setState(() {
_selectedPageIndex = index;
});
}
bool _onTap = false;
@override
Widget build(BuildContext context) {
final themeState = Provider.of<DarkThemeProvider>(context);
return Scaffold(
appBar: AppBar(
toolbarHeight: 40,
backgroundColor: Theme.of(context).brightness == Brightness.dark
? navigationBarsDMColor
: navigationBarsLMColor,
elevation: Theme.of(context).brightness == Brightness.dark ? 0.0 : 3.0,
actions: <Widget>[
IconButton(
icon: FaIcon(
themeState.darkTheme
? FontAwesomeIcons.lightbulb
: FontAwesomeIcons.lightbulb,
size: 20,
color: _onTap ? Colors.black : Colors.white),
tooltip: 'Light/Dark Mode',
onPressed: () {
themeState.darkTheme = value;
setState(() {
value = !value;
_onTap = !_onTap;
});
},
),
],
leading: Builder(
builder: (context) => IconButton(
onPressed: () {
Scaffold.of(context).openDrawer();
},
icon: FaIcon(
themeState.darkTheme
? FontAwesomeIcons.bars
: FontAwesomeIcons.bars,
size: 20,
color: _onTap ? Colors.black : Colors.white),
tooltip: 'Quick Look',
color: Colors.grey,
),
),
centerTitle: true,
title: AnimatedCapsuleButton(
onPressed: () {
// Open the webpage here
},
darkModeColor: yellowDMColor,
lightModeColor: yellowLMColor,
text: 'Resume',
),
),
drawer: SkillsPageDrawer(),
body: _pages[_selectedPageIndex]['page'] as Widget,
bottomNavigationBar: Stack(
children: [
Positioned(
bottom: 0,
left: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: 90,
child: Stack(
clipBehavior: Clip.none,
children: [
CustomPaint(
size: Size(MediaQuery.of(context).size.width, 90),
painter: BNBCustomPainter(),
),
Center(
heightFactor: 0.7,
child: FloatingActionButton(
backgroundColor:
Theme.of(context).brightness == Brightness.dark
? blueDMColor
: blueLMColor,
child: FaIcon(
themeState.darkTheme
? FontAwesomeIcons.houseChimney
: FontAwesomeIcons.houseChimney,
color: _onTap ? Colors.white : Colors.white),
elevation: 0.1,
onPressed: () => setState(() {
_selectedPageIndex = 2;
}),
),
),
Container(
width: MediaQuery.of(context).size.width,
height: 111,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(150, 0, 0, 0),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).brightness ==
Brightness.dark
? orangeDMColor
: orangeLMColor,
),
child: IconButton(
icon: Icon(Icons.bar_chart, color: Colors.white),
onPressed: () => _selectPage(0),
tooltip: 'Abilities',
),
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color:
Theme.of(context).brightness == Brightness.dark
? greenDMColor
: greenLMColor,
),
child: IconButton(
icon: Icon(Icons.school, color: Colors.white),
onPressed: () => _selectPage(1),
tooltip: 'Education',
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.20,
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color:
Theme.of(context).brightness == Brightness.dark
? purpleDMColor
: purpleLMColor,
),
child: IconButton(
icon: Icon(Icons.work, color: Colors.white),
onPressed: () => _selectPage(3),
tooltip: 'Employments',
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 150, 0),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).brightness ==
Brightness.dark
? magentaDMColor
: magentaLMColor,
),
child: IconButton(
icon: Icon(Icons.person, color: Colors.white),
onPressed: () => _selectPage(4),
tooltip: 'About',
),
),
),
],
),
),
],
),
),
),
],
),
floatingActionButtonLocation:
FloatingActionButtonLocation.miniCenterDocked,
);
}
}
class BNBCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = new Paint()
..color = Colors.green
..style = PaintingStyle.fill;
Path path = Path();
path.moveTo(0, 30); // Start
path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.40, 0);
path.quadraticBezierTo(size.width * 0.45, 0, size.width * 0.45, 20);
path.arcToPoint(Offset(size.width * 0.55, 20),
radius: Radius.circular(20.0), clockwise: false);
path.quadraticBezierTo(size.width * 0.55, 0, size.width * 0.65, 0);
path.quadraticBezierTo(size.width * 0.80, 0, size.width, 30);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.lineTo(0, 30);
canvas.drawShadow(path, Colors.black, 5, true);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
chatGPT4 5 个小时都失败了，直到我把眼睛挖出来。
2个回答
0
投票
投票
你的代码看起来不错，除了需要优化。您无法在
StackbottomNavigationBarStack用
StackSizedBoxSizedBox(
height: 100,
child: Stack(
children: [
Positioned(
这将帮助您查看页面内容。
我建议如下优化：
late List<Map<String, Widget>> _pages;
身体：
body: Column(
children: [
Expanded(
child: Column(
children: [
_pages[_selectedPageIndex]['page']!,
],
),
),
],
),
这里是删除一些变量后的构建方法代码：
@override
Widget build(BuildContext context) {
// final themeState = Provider.of<DarkThemeProvider>(context);
print('rebuild with $_selectedPageIndex');
return Scaffold(
appBar: AppBar(
toolbarHeight: 40,
backgroundColor: Colors.blue,
elevation: 3.0,
centerTitle: true,
),
body: Column(
children: [
Expanded(
child: Column(
children: [
_pages[_selectedPageIndex]['page']!,
],
),
),
],
),
bottomNavigationBar: SizedBox(
height: 100,
child: Stack(
children: [
Positioned(
bottom: 0,
left: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: 90,
child: Stack(
clipBehavior: Clip.none,
children: [
CustomPaint(
size: Size(MediaQuery.of(context).size.width, 90),
painter: BNBCustomPainter(),
),
Center(
heightFactor: 0.7,
child: FloatingActionButton(
backgroundColor: Colors.blue,
child: Icon(Icons.house,
color: _onTap ? Colors.white : Colors.white),
elevation: 0.1,
onPressed: () => setState(() {
_selectedPageIndex = 2;
}),
),
),
Container(
//width: MediaQuery.of(context).size.width,
height: 111,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(50, 0, 0, 0),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange,
),
child: IconButton(
icon:
Icon(Icons.bar_chart, color: Colors.white),
onPressed: () => _selectPage(0),
tooltip: 'Abilities',
),
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.indigo,
),
child: IconButton(
icon: Icon(Icons.school, color: Colors.white),
onPressed: () => _selectPage(1),
tooltip: 'Education',
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.20,
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.purple,
),
child: IconButton(
icon: Icon(Icons.work, color: Colors.white),
onPressed: () => _selectPage(3),
tooltip: 'Employments',
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 50, 0),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
child: IconButton(
icon: Icon(Icons.person, color: Colors.white),
onPressed: () => _selectPage(4),
tooltip: 'About',
),
),
),
],
),
),
],
),
),
),
],
),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.miniCenterDocked,
);
}
}
还有我用来测试的_pages列表
_pages = [
{
'page': Container(
color: Colors.orange,
child: Text('Page 1'),
),
},
{
'page': Container(
color: Colors.indigo,
child: Text('Page 2'),
),
},
{
'page': Container(
color: Colors.blue,
child: Text('Page 3'),
),
},
{
'page': Container(
color: Colors.purple,
child: Text(
'Page 4',
),
),
},
{
'page': Container(
color: Colors.red,
child: Text('Page 5'),
),
},
];
0
投票
投票
bottomNavigationBar: LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { return SizedBox( height: 100, child: Stack( children: [ Positioned( bottom: 0, left: 0,//....最新问题
- 无法在 R 上加载 rJava
- 什么是_Layout.cshtml.css以及它如何链接到视图？
- 启动应用程序并知道包名称
- Excel 功能区按钮切换按钮：缩小以适合（文本）
- 如何修改这个正则表达式模式？
- 在android中生成核心转储
- 给定一个已排序的整数数组，如何找到最长的相同值的数字序列，并将该数字存储在指针变量中？
- 如何使用CesiumJs添加卫星并显示其绕地球的轨道路径？
- Java中如何从生菜RedisPubSubListener获取消息？
- 当 y 大于阈值和值范围时，突出显示时间序列中的区域
- 在 Nova Action fields() 上运行 where()->get()
- 为什么编译器会抱怨 `std::enable_if<is_allowed_type<T>::value>::type*=nullptr`？
- 导入文本数据并调整DolphinDB中的字段
- 更新 Gradle 插件和 Firebase Crashlytics 插件后以下任务之间的循环依赖关系
- 我将如何制作链接广告包装器
- 如何在pve 8.2.2中穿越intel GPU
- 如何在React中获取所有选定的表格行项？
- DolphinDB：DolphinScheduler 在尝试连接到 MySQL 8 时遇到错误
- DolphinDB：运行Python文件时，session.run结果为空；当使用 pdb.set_trace() 逐行运行时，结果出现
- 在 ASP.NET 中获取日期选择器的 2 个输入
© www.soinside.com 2019 - 2024. All rights reserved.