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

Question

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

我想要实现的是，每当底部导航栏显示在手机上时，我希望将其隐藏的内容向上推以提高可见性，并且每当导航栏从视线中移除时，我希望内容保留在它的位置。

这是我的代码。

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

问题的可视化

Answer 1

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

Answer 2

使用 SafeArea 小部件来避开底部导航栏。了解有关 SafeArea 小部件的更多信息 点击here

Answer 3

像这样在 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",
                  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,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}