[英]Flutter text overflow in Android emulator, works fine in IOS emulator
I have a Column widget that has 2 children: a SizedBox and a Container with a Text widget.我有一个 Column 小部件,它有 2 个孩子:一个 SizedBox 和一个带有 Text 小部件的容器。 I get an overflow in iOS emulator, but it renders without problems on Android.
我在 iOS 模拟器中出现溢出,但它在 Android 上呈现没有问题。 Should I be using MediaQuery to customize the SizedBox height based on type of device?
我应该使用 MediaQuery 根据设备类型自定义 SizedBox 高度吗? (NOTE: The Scaffold/Stack code is included merely to provide more context, and likely has no bearing on the overflow issue, unless I'm mistaken!)
(注意:包含 Scaffold/Stack 代码只是为了提供更多上下文,并且可能与溢出问题无关,除非我弄错了!)
Widget build(BuildContext context) {
return new Scaffold(
body: new Swiper(
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onVerticalDragStart: (details) {
/* do something */
));
},
child: Stack(
children: [
ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.center,
colors: [Colors.black12, Colors.white])
.createShader(bounds);
},
child: Container(
padding:
new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage(tipList[index].imagePath),
fit: BoxFit.cover,
),
),
),
),
Column(
children: [
new SizedBox(height: 700),
Container(
padding: new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
child: new Text(tipList[index].description,
style: Theme.of(context).textTheme.headline4),
),
],
),
],
),
Use FittedBox with BoxFit.scaleDown and I update your code.将 FittedBox 与 BoxFit.scaleDown 一起使用,我会更新您的代码。
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
body: Swiper(
itemCount: tipList.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onVerticalDragStart: (details) {},
child: Stack(
children: [
ShaderMask(
shaderCallback: (Rect bounds) {
return const LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.center,
colors: [Colors.black12, Colors.white])
.createShader(bounds);
},
child: Container(
padding: const EdgeInsets.only(
left: 16.0, bottom: 8.0, right: 16.0),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(tipList[index].imagePath),
fit: BoxFit.cover,
),
),
),
),
Column(
children: [
const SizedBox(height: 700),
Padding(
padding: const EdgeInsets.only(
left: 16.0, bottom: 8.0, right: 16.0),
child: FittedBox(
fit: BoxFit.scaleDown,
child: Text(tipList[index].description,
style: Theme.of(context).textTheme.headline4),
),
),
],
),
],
),
);
}),
);
}
place your text with Positioned:使用定位放置文本:
Widget build(BuildContext context) {
return new Scaffold(
body: new Swiper(
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onVerticalDragStart: (details) {
/* do something */
));
},
child: Stack(
children: [
ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.center,
colors: [Colors.black12, Colors.white])
.createShader(bounds);
},
child: Container(
padding:
new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage(tipList[index].imagePath),
fit: BoxFit.cover,
),
),
),
),
Positioned(
bottom: 0.0,
child:
Container(
padding: new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
child: new Text(tipList[index].description,
style: Theme.of(context).textTheme.headline4),
),
),
],
),
It is because height of these 2 screens are different.这是因为这两个屏幕的高度不同。 In order to make it UI responsive, you should avoid using SizedBox or Containers with exact height and use Expanded/Spacer widget.
为了使其 UI 响应,您应该避免使用具有精确高度的 SizedBox 或容器,并使用 Expanded/Spacer 小部件。 Both of this widgets will take maximum available space on that specific device screen.
这两个小部件都将占用该特定设备屏幕上的最大可用空间。 So I would try first with this:
所以我会先试试这个:
Column(
children: [
Spacer(), //or Expanded(child:Container()),
Container(
padding: new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
child: new Text(tipList[index].description,
style: Theme.of(context).textTheme.headline4),
),
],
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.