[英]Flutter text overflow in Android emulator, works fine in IOS emulator
[英]Why does my Flutter app look fine on the IOS emulator but overflow on Android?
我知道有不同的屏幕尺寸,但有没有办法解决这个问题? 我也不认为屏幕尺寸有什么不同。 Android的模拟器是nexus 6,IOS的模拟器是iphone 11,相差.14英寸。 IOS 版本很合适,而 Android 则溢出很多。 附上截图。
除了将所有东西压得更紧之外,我该如何解决这个问题? 有没有办法让一切都与屏幕尺寸成比例,所以它在 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"),
),
),
],
),
),
),
);}
如您所见,所有内容的大小几乎都是硬编码的。
您应该使用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"),
),
),
],
),
),
),
),
);
}
由于您使用的是具有特定高度的SizedBox
,如果屏幕尺寸较小,它会溢出。您可以使用MediaQuery.of(context).size.height
将SizedBox
的高度用作百分比或屏幕总height
第二种方法是使用Spacer
和Expanded
根据Column
中的可用空间来分隔内容。
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.