时间戳

首页 > 解决方案 > Flutter：手机底部导航栏隐藏的内容

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

问题的可视化 在此处输入图像描述

标签： flutterdartflutter-layoutscreen-orientation

解决方案

您可以尝试实施 SafeArea，它可以解决这个问题。此小部件可作为存在此类无法访问内容问题的手机的填充。最初是为没有 touchId 的 iPhone 考虑的，但如果我没记错的话，也可以在 Android 上解决这个问题。

这是文档的链接：https ://api.flutter.dev/flutter/widgets/SafeArea-class.html

您可以单独包装容器（以及脚手架）或小部件，如下所示：

SafeArea(
   minimum: const EdgeInsets.all(15.0),
   child: Text('Your Widget'),
)

在您的情况下，我会以这种方式将您的整个 Scaffold 包装到 SafeArea 中：

SafeArea(
 child: Scaffold(
  ...
 )
)

推荐阅读