如何将Flutter Chip小部件的顶部和底部边距设置为零？

Question

如何将Flutter Chip小部件的顶部和底部边距设置为零？

这样我就可以得到这个结果

而不是这个

- Cyrax

---

你尝试过在它们之间使用sizebox吗？ - Aamil Silawat

Answer 1

< p >在< code >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,
            ),
          ],
        ),
      ),
    );
  }
}

- Crazy Lazy Cat

---

芯片中未显示“deleteIcon”。有什么建议吗？ - Kamlesh

明白了。如果您在芯片中使用deleteIcon属性，请不要忘记添加“deleteIconColor”和“onDeleted”属性。谢谢。 - Kamlesh

如果你想进一步减少垂直填充，可以使用 visualDensity: VisualDensity.compact。 - AlienKevin

Answer 2

正如被采纳的答案建议的那样，将 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,
    ),
     ......
     ......
  ],
);

- NaKib

Answer 3

有多种方法可以减少您的芯片的边距。

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
)

- omzer