[英]How to show a constrained widget below another widget in Flutter?
I'd like to implement something like this:我想实现这样的东西:
It would be horizontally scrollable.它将是水平滚动的。
The rectangles are images, I want to make their height for eg.矩形是图像,我想制作它们的高度,例如。 200 and their width to be the maximum of screen width. 200 和它们的宽度是屏幕宽度的最大值。 this I can make easily,这个我很容易做,
BUT I'd also like to show some Text below them, and this text should be as wide as the image.但是我还想在它们下面显示一些文本,并且这些文本应该与图像一样宽。 now simply putting the image+text in a Column doesn't help as the Column's width grows beyond the image if the Text is longer.现在简单地将图像+文本放在一个列中并没有帮助,因为如果文本更长,列的宽度会超出图像。 How could I achieve this?我怎么能做到这一点?
You can place your text to a container that its width is equal to the image above it.您可以将文本放置到其宽度等于其上方图像的容器中。
You can simply create a SizedBox Widget with Specified Width, which contains Your Image and Text inside a ListView with shrinkWrap Enabled.您可以简单地创建一个具有指定宽度的 SizedBox 小部件,它在启用了 shrinkWrap 的 ListView 中包含您的图像和文本。 which would make your UI More flexible, Modular and solves your problem of wrapping text.这将使您的 UI 更加灵活、模块化并解决您的文本换行问题。
There are several possibilities:有几种可能性:
1- Define your own dimensions to the images: 1- 定义您自己的图像尺寸:
Code:代码:
ListView(
scrollDirection: Axis.horizontal, children: [
Column(
children: [
Image.network(
'https://image.flaticon.com/icons/png/512/226/226770.png',
height: 200,
width: 200,
),
Container(
width: 200,
child: Text(
'Android is a mobile operating system sponsored by Google '),
),
],
),
Column(
children: [
Image.network(
'https://img.icons8.com/ios/452/ios-logo.png',
height: 200,
width: 200,
),
Container(
width: 200,
child: Text(
'iOS is a mobile operating system created and developed by Apple Inc. '),
),
],
)
])
2- Use dimensions of the image to create a container of the adapted text. 2- 使用图像的尺寸来创建适应文本的容器。
Use this function to retrieve the dimensions of your images and adapt your text with these dimensions.使用此 function 检索图像的尺寸并使用这些尺寸调整文本。
Function: Function:
Future<Size> getImageDimension() {
Completer<Size> completer = Completer();
Image image = Image.network("https://i.stack.imgur.com/lkd0a.png");
image.image.resolve(ImageConfiguration()).addListener(
ImageStreamListener(
(ImageInfo image, bool synchronousCall) {
var myImage = image.image;
Size size = Size(myImage.width.toDouble(), myImage.height.toDouble());
completer.complete(size);
},
),
);
return completer.future;
}
Example of usage:使用示例:
getImageDimension().then((size) => print("size = ${size}")); // 487.0,696.0
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.