PageView 内的圆角图像保持比率 Flutter
Rounded corners Image inside PageView keeping ratio Flutter
我有一个 PageView
,里面有图片列表。我想保持图像比例并为它们设置圆角。
通常我可以在简单列表或单个图像中裁剪图像。
但在这种情况下,ClipRRect
没有环绕图像,当我将尺寸设置为红色时 Container
没有任何反应。
结果:
代码:
double maxiHeight = 250;
List<Widget> postList = [];
@override
void initState() {
for(Post p in Model.instance.postList) {
postList.add(post(p));
}
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
height: maxiHeight,
child: PageView(
controller: PageController(viewportFraction: 0.5),
children: postList
),
);
}
Widget post(Post post) {
return ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
margin: EdgeInsets.only(right: 10),
color: Colors.red,
child: Image.network(post.thumb, height: 50)
)
);
}
我想保持图片比例。
我在这里错过了什么?
尝试将 BoxFit.cover 添加到 Image.network 小部件
Widget post(Post post) {
return ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
margin: EdgeInsets.only(right: 10),
color: Colors.red,
child: Image.network(post.thumb, height: 50, fit: BoxFit.cover,),
)
);
}
关于您的代码片段,您首先提供边距,然后用 ClipRRect
换行。这里主要的 Container 正在获取它的大小,然后使用边距,在用 ClipRRect
包裹后它正在避免 10px
从右边到 Clip。这就是我们获得当前输出的方式。
但是我们想要在容器外部填充并且没有边框半径。意味着在装饰图像之后,只需提供一些填充。您可以按照此操作并使用 fit: BoxFit.cover
将覆盖小部件大小。
Center(
child: Padding(
padding: EdgeInsets.only(right: 10),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
// margin: EdgeInsets.only(right: 10),// not here
color: Colors.red,
child: Image.network(
// post.thumb,
"https://unsplash.it/1440/3040?random",
// fit: BoxFit.fitHeight,
height: 150,
),
),
),
),
),
使用以下修改后的代码应该可以工作:
@override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
height: 500.0,
child: ListView(scrollDirection: Axis.horizontal, children: postList),
),
);
}
Widget post(String uri) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(uri, fit: BoxFit.fitHeight)
),
);
}
我有一个 PageView
,里面有图片列表。我想保持图像比例并为它们设置圆角。
通常我可以在简单列表或单个图像中裁剪图像。
但在这种情况下,ClipRRect
没有环绕图像,当我将尺寸设置为红色时 Container
没有任何反应。
结果:
代码:
double maxiHeight = 250;
List<Widget> postList = [];
@override
void initState() {
for(Post p in Model.instance.postList) {
postList.add(post(p));
}
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
height: maxiHeight,
child: PageView(
controller: PageController(viewportFraction: 0.5),
children: postList
),
);
}
Widget post(Post post) {
return ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
margin: EdgeInsets.only(right: 10),
color: Colors.red,
child: Image.network(post.thumb, height: 50)
)
);
}
我想保持图片比例。
我在这里错过了什么?
尝试将 BoxFit.cover 添加到 Image.network 小部件
Widget post(Post post) {
return ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
margin: EdgeInsets.only(right: 10),
color: Colors.red,
child: Image.network(post.thumb, height: 50, fit: BoxFit.cover,),
)
);
}
关于您的代码片段,您首先提供边距,然后用 ClipRRect
换行。这里主要的 Container 正在获取它的大小,然后使用边距,在用 ClipRRect
包裹后它正在避免 10px
从右边到 Clip。这就是我们获得当前输出的方式。
但是我们想要在容器外部填充并且没有边框半径。意味着在装饰图像之后,只需提供一些填充。您可以按照此操作并使用 fit: BoxFit.cover
将覆盖小部件大小。
Center(
child: Padding(
padding: EdgeInsets.only(right: 10),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
// margin: EdgeInsets.only(right: 10),// not here
color: Colors.red,
child: Image.network(
// post.thumb,
"https://unsplash.it/1440/3040?random",
// fit: BoxFit.fitHeight,
height: 150,
),
),
),
),
),
使用以下修改后的代码应该可以工作:
@override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
height: 500.0,
child: ListView(scrollDirection: Axis.horizontal, children: postList),
),
);
}
Widget post(String uri) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(uri, fit: BoxFit.fitHeight)
),
);
}