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

Question

如何将 Flutter Chip 小部件的上下边距设置为零？

所以我可以得到这个

而不是这个

Answer 1

在 Chip 小部件中设置 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap。

示例：

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

Answer 2

正如接受的答案所建议的那样，设置 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap 并将 Chip 列表放在 Wrap 中不仅会丢弃顶部和底部边距，还会丢弃左右边距。

所以如果有人想在两个筹码之间留一些余量，他可以在 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,
    ),
     ......
     ......
  ],
);

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

How to set top and bottom margins of the Flutter Chip widget to zero?

margin

widget

flutter