如何解决Flutter:手机底部的导航栏隐藏了内容
在我的注册屏幕中,部分内容(位于底部)被手机底部的导航栏隐藏。仅当我关闭底部导航栏时,内容才可见。
我想要实现的是,每当底部导航栏显示在电话上时,我希望将其隐藏的内容向上推以提高可见度,并且每当导航栏从视线中移开时,我都希望该内容保持在是位置。
这是我的代码。
class Body extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,child: Padding(
padding:
EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(20)),child: SingleChildScrollView(
child: Column(
children: [
Text(
"Register Account",style: headingStyle,),Text(
"Complete your details or continue \nwith social media.",textAlign: TextAlign.center,SizedBox(height: SizeConfig.screenHeight * 0.05),// 5%
SignUpForm(),SizedBox(height: SizeConfig.screenHeight * 0.03),// 3%
Row(mainAxisAlignment: MainAxisAlignment.center,children: [
SocialCard(
icon: "assets/icons/google-icon.svg",press: () {},SocialCard(
icon: "assets/icons/facebook-2.svg",SocialCard(
icon: "assets/icons/twitter.svg",)
]),SizedBox(height: getProportionateScreenHeight(15)),Text( <--- HIDDEN FROM VIEW
"By continuing you confirm that you agree with our Term and Condition",)
],);
}
}
// Get Screen Size
class SizeConfig {
static MediaQueryData _mediaQueryData;
static double screenWidth;
static double screenHeight;
static double defaultSize;
static Orientation orientation;
void init(BuildContext context) {
_mediaQueryData = MediaQuery.of(context);
screenWidth = _mediaQueryData.size.width;
screenHeight = _mediaQueryData.size.height;
orientation = _mediaQueryData.orientation;
}
}
// Get the proportionate height as per screen size
double getProportionateScreenHeight(double inputHeight) {
double screenHeight = SizeConfig.screenHeight;
// 812 is the layout height that designer use
return (inputHeight / 812.0) * screenHeight;
}
解决方法
您可以尝试实施SafeArea,它可以解决此问题。此小部件充当具有此类无法访问内容的问题的电话的填充。最初最初是针对没有touchId的iPhone,但如果我没有记错的话,也可以在Android上解决此问题。
这是文档的链接:https://api.flutter.dev/flutter/widgets/SafeArea-class.html
您可以如下包装容器(也包括脚手架)或小部件:
SafeArea(
minimum: const EdgeInsets.all(15.0),child: Text('Your Widget'),)
在您的情况下,我可以通过以下方式将整个支架包装到SafeArea中:
SafeArea(
child: Scaffold(
...
)
)
,
将整个小部件包装在SafeArea
这将确保放置额外的填充,以解决基于系统的入侵,例如状态栏,导航栏,槽口等。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。