flutter:如何从扩展面板中删除图标

64jmpszr  于 2023-04-22  发布在  Flutter
关注(0)|答案(6)|浏览(271)

Flutter扩展面板默认有图标

我想从扩展面板中删除图标

我该怎么做?这是我的代码

ExpansionPanelList(
        expansionCallback: (int index, bool isExpanded) {},
        children: [
          ExpansionPanel(

            headerBuilder: (BuildContext context, bool isExpanded) {
              return Stack(children: [
                ListTile(//and the rest of code...
yfjy0ee7

yfjy0ee71#

唯一的方法是编辑ExpansionPanel源代码。
我添加了一个名为hasIcon的新属性,并将其默认设置为true(以确保它不会破坏代码)。

ExpansionPanel(
      hasIcon: false,       // <------
      canTapOnHeader: true,
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text(
            'Title',
          ),
        );
      },
      body: Container(),    // <------
      isExpanded: false,    // <------
    ),

下面是如何编辑源代码:
按住CTRL键并单击ExpansionPanel小部件,然后搜索

this.isExpanded = false,

并在其下方添加

this.isExpanded = false,
this.hasIcon = true,

然后搜索

final bool isExpanded;

并在其下方添加

final bool isExpanded;
final bool hasIcon;

最后,搜索

Widget header = Row(
    children: <Widget>[
      Expanded(
        child: AnimatedContainer(
          duration: widget.animationDuration,
          curve: Curves.fastOutSlowIn,
          margin: _isChildExpanded(index) ? widget.expandedHeaderPadding : EdgeInsets.zero,
          child: ConstrainedBox(
            constraints: const BoxConstraints(minHeight: _kPanelHeaderCollapsedHeight),
            child: headerWidget,
          ),
        ),
      ),
      expandIconContainer,
    ],
  );

并替换它

Widget header = Row(
    children: <Widget>[
      Expanded(
        child: AnimatedContainer(
          duration: widget.animationDuration,
          curve: Curves.fastOutSlowIn,
          margin: _isChildExpanded(index) ? widget.expandedHeaderPadding : EdgeInsets.zero,
          child: ConstrainedBox(
            constraints: const BoxConstraints(minHeight: _kPanelHeaderCollapsedHeight),
            child: headerWidget,
          ),
        ),
      ),
      Container(
          child: child.hasIcon? expandIconContainer:null,
      ),
    ],
  );
ecr0jaav

ecr0jaav2#

这是可行的
只需将SizedBox.shrink()添加到ExpansionTile的尾部属性

ExpansionTile(
              trailing: SizedBox.shrink(),
              title: Text(
                "Title",
                style: TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.bold
                ),
              ),
              children: <Widget>[
                ExpansionTile(
                  title: Text(
                    'Sub title',
                  ),
                  children: <Widget>[
                    ListTile(
                      title: Text('data'),
                    )
                  ],
                ),
                ListTile(
                  title: Text(
                    'data'
                  ),
                )
              ],
            ),
vu8f3i0k

vu8f3i0k3#

您可以将this file添加到您的代码中,并使用它来代替ExpansionPanelList。或者您可以直接在flutter版本上编辑ExpansionPanelList的源代码(不推荐)

fsi0uk1n

fsi0uk1n4#

所以,我意识到这是一个老问题,但我花了一段时间寻找一个好的答案。自从版本4. 0引入主题到可扩展的小部件,你可以使用hasIcon删除标题图标。

ExpansionPanel(
            theme:  const ExpandableThemeData(
             hasIcon: false, // <--- Disables icon
            ),
            headerBuilder: (BuildContext context, bool isExpanded) {
              return Stack(children: [
                ListTile(//and the rest of code...

查看https://pub.dev/documentation/expandable/latest/

ckocjqey

ckocjqey5#

如果您在面板中使用ExpantionTile,您可以提供trailing小部件来替换箭头。
目前正在努力将此功能添加到ExpansionPanel,但目前还不支持。您可以扩展此功能并自定义或其他提供此功能的库。(@bensal提到的那个)

x33g5p2x

x33g5p2x6#

我有一个类似的问题与ExpandablePanel,我创建了一个ExpandableThemeData并设置hasIcon属性为false。

var themeData = ExpandableThemeData(hasIcon: false);
ExpandablePanel(
    theme: themeDate,
    ... rest of the code...
      )

相关问题