Flutter 溢出像素問題

Question

這是來自 London App Brewery 完成的 Flutter 項目“BMI 計算器”： https://github.com/londonappbrewery/BMI-Calculator-Flutter-Completed.ZBA9F11ECC3497D99593B933FDCZ2

不知道是我的android手機過時還是android屏幕太小造成的，但是我得到了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),
                         ),
                       )
                     ],
                   ),
                 ),
               )]),),
        ]));
    }
}

Answer 1

發生這種情況是因為您的 UI 為您的手機占用了太多空間。 你有兩個選擇來解決這個問題。

您可以將溢出的小部件包裝在一個滾動小部件中，例如SingleChildScrollView ，如果它太大，這將讓您滾動小部件。

或者您根據設備大小計算小部件的大小。 您可以通過使用MediaQuery class 來做到這一點：

MediaQuery.of(context).size.height可以用來獲取設備高度。 如果您想沿着這條路走 go，請查看這篇文章。 https://medium.com/tagmalogic/widgets-sizes-relative-to-screen-size-in-flutter-using-mediaquery-3f283afc64d6

當然，您也可以只減小小部件的大小，使其適合您的設備。 這對於教程目的來說很好，但如果你真的想發布一個應用程序，go 使用MediaQuery方法。

祝你好運！