英文:
Flutter Material Design on iOS - system navigation over bottom button
问题
我有一个简单的Material应用程序，其中按钮位于底部。在Android上，一切正常，但在iOS系统的底部导航栏上方会覆盖这个按钮。有什么最佳解决方案可以让按钮脱离这个导航栏并仍然在Android上正常运行？
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 2,
child: SvgPicture.asset(
"assets/logo.svg",
fit: BoxFit.contain,
width: double.infinity,
),
),
Text(initMessage),
const Spacer(
flex: 1,
),
ElevatedButton(
onPressed: () => navigatorKey.currentState?.pushNamed('/help'),
child: const Text('显示帮助'))
],
),
);
}
英文:
I have simple Material app where button is at bottom.
On Android it's OK on iOS system navigation bar at bottom is over this button.
What is the best solution to have button out of this navigation and still be OK on Android?
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 2,
child: SvgPicture.asset(
"assets/logo.svg",
fit: BoxFit.contain,
width: double.infinity,
),
),
Text(initMessage),
const Spacer(
flex: 1,
),
ElevatedButton(
onPressed: () => navigatorKey.currentState?.pushNamed('/help'),
child: const Text('Show Help'))
],
),
);
}
答案1
得分: 1
你可以将你的列部件包裹在一个SafeArea部件中，使其变为：
SafeArea {
child: Column {
更多信息请参见https://api.flutter.dev/flutter/widgets/SafeArea-class.html
英文:
You can wrap your column widget with a SafeArea widget.
so that it becomes.
SafeArea {
child: Column {
for more please see https://api.flutter.dev/flutter/widgets/SafeArea-class.html
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论