【问题标题】:Flutter ExpansionTile title vertical paddingFlutter ExpansionTile 标题垂直填充
【发布时间】:2021-04-04 14:00:48
【问题描述】:

如何删除 ExpansionTile 中前导 Widget 中的垂直填充,使其看起来像下面的 ListTile?

这是我的代码:

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Color.fromRGBO(200, 200, 200, 1), width: 2),
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
  child: ListTileTheme(
    contentPadding: EdgeInsets.zero,
    dense: true,
    child: ExpansionTile(
        childrenPadding: EdgeInsets.zero,
        tilePadding: EdgeInsets.zero,
        title: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Text(Constants.texts.chooseFromList,
              style: Constants.textStyles.lightGreyMediumSize),
        ),
        children: [
          Text('One'),
          Text('Two'),
          Text('Three'),
        ],
        trailing: Image.asset(
          'assets/icons/snn_app_ubytovanie_filter_open_button_merged_idle_crop.png',
        )),
  ),
)

ListTile 下的代码如下:

Container(
      decoration: BoxDecoration(
        border: Border.all(
            color: Color.fromRGBO(200, 200, 200, 1), width: 2),
        borderRadius: BorderRadius.all(Radius.circular(10)),
      ),
      child: ListTileTheme(
        contentPadding: EdgeInsets.zero,
        dense: true,
        child: ListTile(
          title: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Text("Here it works!",
                style: Constants.textStyles.lightGreyMediumSize),
          ),
          trailing: Image.asset(
            'assets/icons/snn_app_ubytovanie_filter_open_button_merged_idle_crop.png',
          ),
        ),
      ),
    )

我已经从颤振 repo 复制粘贴和重构 ExpansionTile 的源代码,但我似乎无法弄清楚导致填充的原因。非常感谢任何建议。

【问题讨论】:

    标签: flutter padding


    【解决方案1】:

    好的,所以我发现造成差距的是原始 ExpansionTile 源代码中的透明边框:

    Container(
      decoration: BoxDecoration(
        color: _backgroundColor.value ?? Colors.transparent,
        border: Border(
          top: BorderSide(color: borderSideColor),
          bottom: BorderSide(color: borderSideColor),
        ),
      ),
    

    虽然它的颜色是从 backgroundColor 参数派生的,但我发现解决我的问题的唯一解决方法是编辑原始 ExpansionTile 的源代码并删除 BoxDecoration。希望这对遇到同样问题的人有所帮助。

    【讨论】:

    • 您好,将其注释掉,减少填充,但不会使其无效仍然存在一些填充。您找到完全删除它的方法了吗?
    • 嗨,您是否为 ListTileTheme 设置了 contentPadding: E​​dgeInsets.zero 和 dense: true?
    猜你喜欢
    • 2020-09-12
    • 1970-01-01
    • 2020-03-13
    • 1970-01-01
    • 2020-07-18
    • 2019-07-09
    • 2021-11-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多