现在我在flutter中像这样使用ListTile:
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
color: Colors.white,
child: ListTile(
leading: Icon(Feather.settings),
title: Text("设置"),
onTap: () async {
Widget page = CustomSetting();
Navigator.push(
context,
MaterialPageRoute(builder: (context) => page),
);
},
))
)
这是现在的结果:
现在我希望 ListTile 不填满屏幕宽度,保持左侧和右侧有一些间隙,但是当我调整 Container 的宽度时它没有任何变化,我应该怎么做才能使其工作?效果可能是这样的:
我像这样添加了填充,但仍然不起作用:
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
color: Colors.white,
//margin: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: ListTile(
leading: Icon(Feather.settings),
title: Text("设置"),
onTap: () async {
Widget page = CustomSetting();
Navigator.push(
context,
MaterialPageRoute(builder: (context) => page),
);
},
))))
用 padding 包裹你的 ClipRRect
Padding(
padding: EdgeInsets.only(left:10,right:10),
child:ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
color: Colors.white,
child: ListTile(
leading: Icon(Icons.settings),
title: Text("设置"),
))
),
),
将其包含在 Padding 小部件中。
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
color: Colors.white,
child: Padding(
padding: EdgeInsets.fromLTRB(100, 30, 100, 30),
child: ListTile(
leading: Icon(Feather.settings),
title: Text("设置"),
onTap: () async {
Widget page = CustomSetting();
Navigator.push(
context,
MaterialPageRoute(builder: (context) => page),
);
},
)// ListTile
) // Padding
) // Container
) // ClipRRect
Flutter ListTiles 具有内置填充。
ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 0.0), // Change this...
title: const Text("List Tiles"),
subtitle: const Text("Have built-in default padding."),
trailing: IconButton(
onPressed: () {},
icon: const Icon(Icons.abc),
),
),