我已经创建了一个包含按钮的自定义应用程序栏。问题是我无法单击这些按钮。我已经检查了按钮的输出,但没有发生。
main.dart
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
initialRoute: '/',
routes: <String, WidgetBuilder>{
'/': (BuildContext context) {
return const HomeScreen();
},
'/archive': (BuildContext context) {
return const ArchiveScreen();
}
},
);
}
}
HomeScreen.dart
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: const [
Indexed(
index: 10,
child: Positioned(bottom: 0, left: 0, child: BottomNav()),
),
Indexed(
index: 1,
child: Positioned(
bottom: 0,
left: 0,
right: 0,
top: 0,
child: Text("hallo"),
),
),
],
),
),
);
}
}
BottomBar.dart
class BottomNav extends StatefulWidget with PreferredSizeWidget {
const BottomNav({super.key});
@override
Size get preferredSize => const Size.fromHeight(70.0);
@override
State<BottomNav> createState() => _BottomNavState();
}
class _BottomNavState extends State<BottomNav> {
@override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
return Container(
width: size.width,
height: 60,
decoration: const BoxDecoration(
border: Border(
top: BorderSide(width: 1.0, color: Color(0xFF999999)),
),
color: Color(0xFFF0F1F4),
),
child: Stack(
children: [
Align(
alignment: const Alignment(0, -0.5),
child: SizedBox(
width: 0,
height: 0,
child: OverflowBox(
minWidth: 0.0,
maxWidth: 100.0,
minHeight: 0.0,
maxHeight: 100.0,
child: Container(
width: 64,
height: 64,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(100)),
color: Color(0xFF00007F)),
child: IconButton(
icon: SvgPicture.asset('assets/icons/search-navbar.svg'),
tooltip: 'Increase volume by 10',
onPressed: () => {
Navigator.pushNamed(context, '/'),
debugPrint("home")
},
),
),
),
),
),
Align(
alignment: const Alignment(-0.8, 0),
child: IconButton(
icon: SvgPicture.asset('assets/icons/archive.svg'),
tooltip: 'Increase volume by 11',
onPressed: () => {
Navigator.pushNamed(context, '/archive'),
debugPrint("archive")
},
),
),
],
),
);
}
}
我的第一个想法是,原因是堆栈和按钮上方有一个元素。所以我删除了所有的元素,使只有一个按钮在应用程序栏,但它没有帮助。
3条答案
按热度按时间1wnzp6jl1#
变更
至
而且,您可以像这样设置BottomNavigationBar,它比您的Stack实现更容易
5tmbdcev2#
你应该找到另一个解决方案,因为你的第二个带“hallo”的索引在BottomNav上面,它覆盖了整个区域。我把它做成红色,这样你在启动应用程序时就可以看到它
kr98yfug3#
我得到了一个解决方案。这是多个问题的组合。就像@Stellar Creed说的,容器在我的AppBar上面。
另一个问题是,我把SizedBox的宽度:0和高度:0.
对齐(对齐方式:常量对齐(0,-0.5),子项:调整大小的方块(长度:0,身高:0,儿童:溢出框(