如何删除 Flutter 中图像的默认填充?
How to remove default padding of an Image in Flutter?
正如您在屏幕截图中看到的,我的图像小部件中有一些填充,即使我没有定义任何填充。我想这是默认填充。但是为了配合我的设计,我想删除这个填充。
代码如下:
class PackingPlanEntry extends StatelessWidget {
const PackingPlanEntry({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
color: Color.fromRGBO(208, 190, 162, 100.0),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(5))),
child: Row(
children: [
Image.asset("assets/backpack.jpeg", height: 122, width: 70),
Image.asset("assets/boots.jpeg", height: 122, width: 70),
Column(
children: [
Text(
"Norwegen Tour 2022",
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontFamily: "Roboto",
fontWeight: FontWeight.bold),
),
Row(
children: [
Text(
"12 Teile gepackt",
style: TextStyle(
color: Color.fromARGB(400, 0, 0, 0),
fontSize: 12),
),
Text("3",
style: TextStyle(
color: Colors.black.withOpacity(0.5))),
Image.asset("assets/user.png",
color: Colors.black.withOpacity(0.5))
],
)
],
)
],
),
);
}
}
我已经尝试添加
padding: EdgeInsets.zero,
但这似乎根本没有改变任何东西。
试试这个
Container(
padding: EdgeInsets.zero,
decoration: const BoxDecoration(
color: Color.fromRGBO(208, 190, 162, 100.0),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(5))),
child: ....,
)
我意识到对图像添加 width
有点增加了额外的填充。只有height
(在恒定比率下工作正常)才有效并删除了填充。
我认为你的问题是由图像引起的,所以你应该在图像中添加fit
,
示例:
Image.asset("assets/backpack.jpeg", height: 122, width: 70, fit: BoxFit.fitHeight),
Image.asset("assets/boots.jpeg", height: 122, width: 70, fit: BoxFit.fitHeight),
BoxFit种类繁多,您应该考虑选择合适的一款
正如您在屏幕截图中看到的,我的图像小部件中有一些填充,即使我没有定义任何填充。我想这是默认填充。但是为了配合我的设计,我想删除这个填充。
代码如下:
class PackingPlanEntry extends StatelessWidget {
const PackingPlanEntry({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
color: Color.fromRGBO(208, 190, 162, 100.0),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(5))),
child: Row(
children: [
Image.asset("assets/backpack.jpeg", height: 122, width: 70),
Image.asset("assets/boots.jpeg", height: 122, width: 70),
Column(
children: [
Text(
"Norwegen Tour 2022",
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontFamily: "Roboto",
fontWeight: FontWeight.bold),
),
Row(
children: [
Text(
"12 Teile gepackt",
style: TextStyle(
color: Color.fromARGB(400, 0, 0, 0),
fontSize: 12),
),
Text("3",
style: TextStyle(
color: Colors.black.withOpacity(0.5))),
Image.asset("assets/user.png",
color: Colors.black.withOpacity(0.5))
],
)
],
)
],
),
);
}
}
我已经尝试添加
padding: EdgeInsets.zero,
但这似乎根本没有改变任何东西。
试试这个
Container(
padding: EdgeInsets.zero,
decoration: const BoxDecoration(
color: Color.fromRGBO(208, 190, 162, 100.0),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(5))),
child: ....,
)
我意识到对图像添加 width
有点增加了额外的填充。只有height
(在恒定比率下工作正常)才有效并删除了填充。
我认为你的问题是由图像引起的,所以你应该在图像中添加fit
,
示例:
Image.asset("assets/backpack.jpeg", height: 122, width: 70, fit: BoxFit.fitHeight),
Image.asset("assets/boots.jpeg", height: 122, width: 70, fit: BoxFit.fitHeight),
BoxFit种类繁多,您应该考虑选择合适的一款