英文:
How to display a widget above a tab in Flutter?
问题
我有一个底部选项卡栏。
当满足某些条件时，我需要在给定选项卡上方显示一个小部件，如下所示：
为了简单起见，我在这里显示一个Text("ALERT")，但在实际应用中，它将是一个可点击的小部件。
我该如何做呢？
英文:
I have a bottom tab bar.
When some conditions are met, I need to display a widget abode a given tab as follows:
For simplicity, I display a Text("ALERT") here, but in the real app it'll be a tapable widget.
How can I do that?
答案1
得分: 0
只需将您拥有的任何小部件（例如，在您的情况下是Text小部件）包装在一个GestureDetector小部件中，如下所示：
GestureDetector(
onTap: () {
setState(() {
// 点击时发生的操作
});
},
),
英文:
Just wrap whatever widget you have (in your case Text widget for example) with a GestureDetector widget like this:
GestureDetector(
onTap: () {
setState(() {
// What happens with the tap
});
},
),
答案2
得分: 0
- 使用一个
Column，先插入小部件，然后在最后插入选项卡栏：但这会使您的底部应用看起来比预期的要高。这会给您：
- 添加
extendBody:true，使实际选项卡栏上方的区域变为透明，从而去除不需要的区域：
Scaffold(
extendBody: true,
bottomNavigationBar: Column(
mainAxisSize: MainAxisSize.min,
children: [
Chip(
label: Text("Draft pending"),
backgroundColor: Colors.amber,
),
bottomTabBar,
]
)
// 哈哈哈
),
英文:
I finally found a solution in two steps:
- Use a
Columnand insert the widget first, and the tabbar last: but this makes your bottom app appears taller than what one wants. This gives you:
- Add
extendBody:truewhich makes the area above the actual TabBar transparent so that removes the unwanted area:
Scaffold(
extendBody: true,
bottomNavigationBar: Column(
mainAxisSize: MainAxisSize.min,
children: [
Chip(
label: Text("Draft pending"),
backgroundColor: Colors.amber,
),
bottomTabBar,
]
)
// blah blah
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论