首页 > 解决方案 > 如何将 Flutter Chip 小部件的顶部和底部边距设置为零?

问题描述

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

所以我可以得到这个

而不是这个

标签: flutterwidgetmargin

解决方案


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

例子:

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

推荐阅读