Flutter：如何调整小部件以避免android底部的导航栏

问题描述

在我的注册屏幕中，部分内容（位于底部）被手机底部的导航栏隐藏。仅当我关闭底部导航栏时，内容才可见。

我想要实现的是，每当底部导航栏显示在电话上时，我希望将其隐藏的内容向上推以提高可见度，并且每当导航栏从视线中移开时，我都希望该内容保持在是位置。

这是我的代码。

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",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;
}

问题的外观

解决方法

使用SingleChildScrollView有什么特殊要求吗？如果不能，请尝试下面的代码，如果它对您有用，这就是它的作用

1. 将SigleChildScrollView替换为Container
2. 将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",SocialCard(
                    icon: "assets/icons/twitter.svg",)
                ]),SizedBox(height: getProportionateScreenHeight(15)),Text(    
                  "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 Widget避开底部导航栏。进一步了解SafeArea小部件 点击here

,

像这样在您的SizedBox上增加高度

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: double.infinity,height: MediaQuery.of(context).size.height. // Add this line

        child: Padding(
          padding:
              EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(20)),child: SingleChildScrollView(
            child: Column(
              children: [
                Text(
                  "Register Account",// 4%
                SignUpForm(),Text(                                <--- HIDDEN FROM VIEW
                  "By continuing you confirm that you agree with our Term and Condition",);
  }
}