在我的注册屏幕中,电话底部的导航栏隐藏了部分内容(底部)。仅当我关闭底部导航栏时,内容才可见。
我想要实现的是,每当底部导航栏显示在手机上时,我都希望将其隐藏的内容向上推以提高可见性,并且每当导航栏从视线中移开时,我都希望该内容保持在其位置。
这是我的代码。
class Body extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: 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.04), // 4%
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",
press: () {},
),
SocialCard(
icon: "assets/icons/twitter.svg",
press: () {},
)
]),
SizedBox(height: getProportionateScreenHeight(15)),
Text( <--- HIDDEN FROM VIEW
"By continuing you confirm that you agree with our Term and Condition",
textAlign: TextAlign.center,
),
],
),
),
),
),
);
}
}
// 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;
}
视觉问题最佳答案
使用SingleChildScrollView
有任何特殊要求吗?如果不能,请尝试下面的代码,如果这对您有用,这就是它的作用
SigleChildScrollView
替换Container
SignupForm()
包装在Expanded()
小部件中。 这是代码-
class Body extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: SizedBox(
width: double.infinity,
child: Padding(
padding:
EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(20)),
child: Container(
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.04), // 4%
Expanded(child: 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",
press: () {},
),
SocialCard(
icon: "assets/icons/twitter.svg",
press: () {},
)
]),
SizedBox(height: getProportionateScreenHeight(15)),
Text(
"By continuing you confirm that you agree with our Term and Condition",
textAlign: TextAlign.center,
),
],
),
),
),
),
);
}
}
// 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;
}
关于flutter - Flutter:如何调整小部件以避免android的底部导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64399585/