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

标签 flutter dart flutter-layout safearealayoutguide

在我的注册屏幕中,电话底部的导航栏隐藏了部分内容(底部)。仅当我关闭底部导航栏时,内容才可见。
我想要实现的是,每当底部导航栏显示在手机上时,我都希望将其隐藏的内容向上推以提高可见性,并且每当导航栏从视线中移开时,我都希望该内容保持在其位置。
这是我的代码。

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;
}
视觉问题
enter image description here

最佳答案

使用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/

    相关文章:

    flutter - 如何每隔15秒在后台运行一些Dart代码

    双向 flutter 饲料生长

    listview - 下拉 ListView

    dart - 检查 ListView 是否在 flutter 中为空

    flutter - 创建内部带有透明孔的小部件

    flutter - 如何在flutter中获取showModalBottomSheet的onDismiss回调?

    flutter - 改变 InkWell 的速度

    android - 字体下意外的关键 Assets ((String)) - flutter 和 dart 中的移动应用程序错误

    flutter - 垂直分隔线未显示

    firebase-realtime-database - 如何在 Flutter 的 FirebaseDatabase 插件中使用 ServerValue