【问题标题】:Why does my Flutter app look fine on the IOS emulator but overflow on Android?为什么我的 Flutter 应用在​​ IOS 模拟器上看起来不错,但在 Android 上却溢出了?
【发布时间】:2020-09-01 22:21:37
【问题描述】:

我知道有不同的屏幕尺寸,但有没有办法解决这个问题?我也不认为屏幕尺寸有那么不同。 Android的模拟器是nexus 6,IOS模拟器是iphone 11,相差0.14英寸。 IOS版合身舒服,安卓版溢出很多。附上截图。

除了将所有东西挤在一起之外,我该如何解决这个问题?有没有办法让一切都与屏幕尺寸成正比,所以它在 IOS 上看起来一样,但随后缩小到 Android 手机?我的 Dart 代码如下:

Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    backgroundColor: Colors.teal,
    body: SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: CircleAvatar(
              radius: 100.0,
              backgroundImage: AssetImage('images/headshot.jpg'),
            ),
          ),
          SizedBox(
            height: 0.0,
          ),
          Container(
            child: Text(
              'Lawrence Jing',
              style: TextStyle(
                  fontSize: 50,
                  color: Colors.white,
                  fontFamily: 'Dancing_Script'),
            ),
          ),
          SizedBox(
            height: 10.0,
          ),
          Container(
            child: Text(
              'SERTIFIED CASTING INTERN',
              style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                  fontWeight: FontWeight.bold),
            ),
          ),
          Card(
            color: Colors.amberAccent,
            margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
            child: ListTile(
              leading: Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Icon(Icons.school),
                  SizedBox(
                    width: 10.0,
                  ),
                  VerticalDivider(),
                ],
              ),
              title: Text(
                'University of Michigan',
                style: TextStyle(
                  color: Colors.blue,
                  fontSize: 19.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              enabled: false,
            ),
          ),
          SizedBox(
            height: 23.0,
            width: 200.0,
            child: Divider(
              color: Colors.teal[200],
            ),
          ),
          Card(
            color: Colors.white,
            margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
            child: ListTile(
              leading: Icon(
                Icons.phone,
                color: Colors.teal,
              ),
              title: Text(
                '(650)278-7409',
                style: TextStyle(
                  color: Colors.teal[600],
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              enabled: true,
              onTap: () => launch("tel:+1234"),
              onLongPress: () => launch("sms: 1234"),
            ),
          ),
          SizedBox(
            height: 10.0,
          ),
          Card(
            color: Colors.white,
            margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
            child: ListTile(
              leading: Icon(
                Icons.email,
                color: Colors.teal,
              ),
              title: Text(
                'lajing@umich.edu',
                style: TextStyle(
                  color: Colors.teal[600],
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              enabled: true,
              onTap: () => launch("mailto:email"),
            ),
          ),
          SizedBox(
            height: 10.0,
          ),
          Card(
            color: Colors.white,
            margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
            child: ListTile(
              leading: Icon(
                Icons.account_circle,
                color: Colors.teal,
              ),
              title: Text(
                'LinkedIn',
                style: TextStyle(
                  color: Colors.teal[600],
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              enabled: true,
              onTap: () => launch("https://www.linkedin.com/in/lajing/"),
            ),
          ),
          SizedBox(
            height: 10.0,
          ),
          Card(
            color: Colors.white,
            margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
            child: ListTile(
              leading: Icon(
                Icons.code,
                color: Colors.teal,
              ),
              title: Text(
                'GitHub',
                style: TextStyle(
                  color: Colors.teal[600],
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              enabled: true,
              onTap: () => launch("https://github.com/LarryJing"),
            ),
          ),
        ],
      ),
    ),
  ),
);}

如您所见,所有内容的大小几乎都是硬编码的。

【问题讨论】:

    标签: android ios android-studio flutter dart


    【解决方案1】:

    您应该使用SingleChildScrollView 作为Column 的父级,因此如果空间不可用,那么它将可滚动(或)您可以使用ListView 而不是Column

    举例

     @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            backgroundColor: Colors.teal,
            body: SafeArea(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Center(
                      child: CircleAvatar(
                        radius: 100.0,
                        backgroundImage: AssetImage('images/headshot.jpg'),
                      ),
                    ),
                    SizedBox(
                      height: 0.0,
                    ),
                    Container(
                      child: Text(
                        'Lawrence Jing',
                        style: TextStyle(
                            fontSize: 50,
                            color: Colors.white,
                            fontFamily: 'Dancing_Script'),
                      ),
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    Container(
                      child: Text(
                        'SERTIFIED CASTING INTERN',
                        style: TextStyle(
                            fontSize: 20,
                            color: Colors.white,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                    Card(
                      color: Colors.amberAccent,
                      margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
                      child: ListTile(
                        leading: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Icon(Icons.school),
                            SizedBox(
                              width: 10.0,
                            ),
                            VerticalDivider(),
                          ],
                        ),
                        title: Text(
                          'University of Michigan',
                          style: TextStyle(
                            color: Colors.blue,
                            fontSize: 19.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        enabled: false,
                      ),
                    ),
                    SizedBox(
                      height: 23.0,
                      width: 200.0,
                      child: Divider(
                        color: Colors.teal[200],
                      ),
                    ),
                    Card(
                      color: Colors.white,
                      margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
                      child: ListTile(
                        leading: Icon(
                          Icons.phone,
                          color: Colors.teal,
                        ),
                        title: Text(
                          '(650)278-7409',
                          style: TextStyle(
                            color: Colors.teal[600],
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        enabled: true,
                        onTap: () => launch("tel:+1234"),
                        onLongPress: () => launch("sms: 1234"),
                      ),
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    Card(
                      color: Colors.white,
                      margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
                      child: ListTile(
                        leading: Icon(
                          Icons.email,
                          color: Colors.teal,
                        ),
                        title: Text(
                          'lajing@umich.edu',
                          style: TextStyle(
                            color: Colors.teal[600],
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        enabled: true,
                        onTap: () => launch("mailto:email"),
                      ),
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    Card(
                      color: Colors.white,
                      margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
                      child: ListTile(
                        leading: Icon(
                          Icons.account_circle,
                          color: Colors.teal,
                        ),
                        title: Text(
                          'LinkedIn',
                          style: TextStyle(
                            color: Colors.teal[600],
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        enabled: true,
                        onTap: () => launch("https://www.linkedin.com/in/lajing/"),
                      ),
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    Card(
                      color: Colors.white,
                      margin: EdgeInsets.fromLTRB(50, 10, 50, 10),
                      child: ListTile(
                        leading: Icon(
                          Icons.code,
                          color: Colors.teal,
                        ),
                        title: Text(
                          'GitHub',
                          style: TextStyle(
                            color: Colors.teal[600],
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        enabled: true,
                        onTap: () => launch("https://github.com/LarryJing"),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    

    【讨论】:

      【解决方案2】:

      由于您使用具有特定高度的SizedBox,因此如果屏幕尺寸较小,它将溢出。您可以使用MediaQuery.of(context).size.heightSizedBox 的高度用作百分比或屏幕总数height

      第二种方法是使用SpacerExpanded 根据Column 中的可用空间来分隔内容。

      希望这会有所帮助。

      【讨论】:

        猜你喜欢
        • 2022-01-23
        • 2017-09-13
        • 2012-11-25
        • 1970-01-01
        • 2011-09-28
        • 1970-01-01
        • 2023-03-10
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多