【问题标题】:Is it possible to fill ExpansionTile title with image in Flutter?是否可以在 Flutter 中用图像填充 ExpansionTile 标题?
【发布时间】:2020-03-13 21:19:00
【问题描述】:

我想创建一个可展开的图库,其中有一张图片作为主图片,单击它后,我想展开图库并在主图片下方显示几张图片。 所以,我创建了一个 ListView,它有一个返回 ListTileTheme 的构建器,我用它来删除 contentPadding,带有 child - ExpansionTile,但我仍然在容器中留下了一些填充。 知道如何完全填充 ExpansionTile 吗?我尝试了在网上看到的不同方法,但目前没有解决方案。

这是我的代码:

Container _getGallery() {
    Container container = new Container(
      height: 500.0,
      child: new ListView.builder(itemCount: 1, itemBuilder: (context, i)
      {
        ListTileTheme tileTheme = new ListTileTheme(
          contentPadding: EdgeInsets.all(0.0),
          child: ExpansionTile(
            trailing: Container(
              height: 0.0,
              width: 0.0,
            ),
            backgroundColor: Colors.transparent,
            title: Image.asset("assets/images/onboarding2.png",
                height: 200.0,
                width: double.infinity,
                alignment: Alignment.center,
                fit: BoxFit.cover,
            ),
            children: <Widget>[
              new Column(
                children: _buildExpandableContent(),
              ),
            ],
          ),
        );
        return tileTheme;
      }),
    );
    return container;
  }

在这里你可以看到我到目前为止所取得的成就(1- 未扩展,2- 扩展)。我想删除第一张图片周围的白线。

【问题讨论】:

  • 是的,我试过了,很遗憾,没有任何改变。我已经编辑了我的代码(删除了我不再使用的 Padding 小部件)。

标签: android ios flutter mobile dart


【解决方案1】:

不,这是不可能的。这个小部件使用 ListTile,如果有尾随小部件,它会增加 16px 的间隙(_horizo​​ntalTitleGap 常量)。问题是 ExpansionTile 中总是有一个尾随小部件,即使您传递 null:

trailing: widget.trailing ?? RotationTransition(
  turns: _iconTurns,
  child: const Icon(Icons.expand_more),
),

我可以建议的唯一肮脏的解决方法是使用缩放变换来补偿这个 16px 的差距:

title: LayoutBuilder(
  builder: (context, constraints) {
    final newScale = 1.0 + 16.0 / constraints.maxWidth;

    return Container(
      transform: Matrix4.identity()..scale(newScale),
      child: Image.asset("assets/images/onboarding2.png",
          height: 200.0,
          width: double.infinity,
          alignment: Alignment.center,
          fit: BoxFit.cover,
      ),
    );
  }
),

【讨论】:

  • 谢谢,伙计。我想这不是最好的解决方案,而是唯一的解决方案,非常感谢。像预期的那样工作。你知道这种方法是否会以某种方式减慢应用程序的速度吗?
猜你喜欢
  • 2021-04-04
  • 2019-07-09
  • 2012-03-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-09-12
  • 2021-11-25
相关资源
最近更新 更多