颤振溢出像素问题答案

【问题标题】：Flutter Overflow Pixel issue颤振溢出像素问题
【发布时间】：2020-05-26 17:44:47
【问题描述】：

这是来自 London App Brewery 完成的 Flutter 项目“BMI Calculator”：https://github.com/londonappbrewery/BMI-Calculator-Flutter-Completed.git

不知道是不是我的安卓手机过时或者安卓屏幕太小导致的，但是我得到Bottom Overflow Pixels 比如上面两张卡有Bottom Overflow by 19 Pixels的错误信息，中间卡错误为Bottom Overflowed by 60 pixels，底部两张卡错误为Bottom Overflowed by 56 pixels。

此外，如果我将手机旋转 90 度，卡片图像的大小会显着减小，正如您从第二张图像中看到的那样。

请帮我解决这个问题。

谢谢

 class _InputPageState extends State<InputPage {
    @override   
    Widget build(BuildContext context) {
     return Scaffold(
       resizeToAvoidBottomPadding: false,
       appBar: AppBar(
         title: Text('BMI CALCULATOR'),
       ),
       body: Column(
        children: <Widget[
           Expanded(
               child: Row(
             children: <Widget[
               Expanded(
                 child: ReusableCard(
                   colour: colorCode,
                   cardChild: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: <Widget[
                       Icon(
                         FontAwesomeIcons.mars,
                         size: 20.0,
                       ),
                       SizedBox(
                         height: 5.0,
                       ),
                       Text(
                         'MALE',
                         style: TextStyle(
                           fontSize: 10.0,
                           color: Color(0xFF8D8E98),
                         ),
                       )
                     ],
                   ),
                 ),
               )]),),
        ]));
    }
}

【问题讨论】：

标签： android flutter

【解决方案1】：

发生这种情况是因为您的 UI 占用了太多手机空间！你有两个选择来解决这个问题。

您可以将溢出的小部件包装在滚动小部件中，例如SingleChildScrollView，这样如果小部件太大，您可以滚动它。

或者您根据设备大小计算小部件的大小。你可以通过使用MediaQuery 类来做到这一点：

MediaQuery.of(context).size.height 例如可以用来获取设备高度。如果您想走这条路，请查看这篇文章。 https://medium.com/tagmalogic/widgets-sizes-relative-to-screen-size-in-flutter-using-mediaquery-3f283afc64d6

当然，您也可以只减小小部件的大小，使其适合您的设备。这对于教程目的来说很好，但如果你真的想发布一个应用程序，请使用MediaQueryapproach。

祝你好运！

【讨论】：