如何将Flutter Chip小部件的顶部和底部边距设置为零?
这样我就可以得到这个结果
而不是这个
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
。< /p >
示例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Wrap(
children: <Widget>[
for(final i in List.generate(20, (i) => i))
Chip(
avatar: Icon(Icons.account_circle),
label: Text("Chip $i"),
deleteIcon: Icon(Icons.cancel),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
],
),
),
);
}
}
visualDensity: VisualDensity.compact
。 - AlienKevin正如被采纳的答案建议的那样,将 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
设置为并且将 Chip
列表放置在 Wrap
内部将不仅丢弃顶部和底部边距,还会丢弃左侧和右侧边距。
因此,如果有人想在两个 Chips 之间添加一些边距,可以使用 Wrap
内部的 spacing
属性。
Wrap(
spacing: 3.0, // spacing between adjacent chips
runSpacing: 0.0, // spacing between lines
children: [
Chip(
label: Text("Chip 1"),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
Chip(
label: Text("Chip 2"),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
......
......
],
);
有多种方法可以减少您的芯片
的边距。
Chip(
... your other props
visualDensity: VisualDensity.compact
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
padding: EdgeInsets.zero, // Use this or labelPadding but not both
labelPadding: EdgeInsets.symmetric(horizontal: 4),
labelStyle: TextStyle(fontSize: 12) // You can reduce the font size for a smaller chip
)