如何设置顶部和底部边缘的Flutter芯片小工具为零?

bbuxkriu  于 2022-12-19  发布在  Flutter
关注(0)|答案(3)|浏览(137)

如何将Flutter Chip小工具的顶部和底部边距设置为零?
所以我可以得到这个

而不是这个

63lcw9qa

63lcw9qa1#

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

nhjlsmyf2#

正如已接受的答案所示,设置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,
    ),
     ......
     ......
  ],
);
uelo1irk

uelo1irk3#

有多种方法可以减少你的利润

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
)

相关问题