flutter - 在 Flutter 的扩展面板列表中展开时，有没有办法消除扩展面板之间的间距？

Question

我遇到了一个问题，我想在扩展面板时删除扩展面板列表的扩展面板之间的空间。

不良行为的图像，这些图像取自 flutter 文档:

未展开时列出，这很好:



展开时列出:
- 您可以看到部分之间的差距。这是我不想要的应用程序。



任何提示表示赞赏。

Answer 1

尝试修改实际实现

如果您有一些以前的编程经验，这应该是有道理的......

找到这些文件:

expand_panel.dart

expand_title.dart

expand_icon.dart

mergeable_material.dart

这些文件应该位于 External Library > Dart Packages > Flutter > src > material。请注意， Material 文件夹可以表示为“src.material”。

Android Studio 应该允许您将鼠标悬停在 ExpansionPanel 小部件上并右键单击它。右键单击它后，您应该会看到一个快捷方式列表，其中一个是“转到”。单击“转到”选项，这将显示更多选项，其中之一是“实现”。这应该会将您带到需要的地方。根据我的版本，双击小部件名称以突出显示整个小部件的名称应该允许使用键盘快捷键 Ctrl+Alt+B。

您必须进入的关键文件是“mergeable_material.dart”。在“mergeable.dart”中，转到 MaterialGap 构造函数:

const MaterialGap({
    @required LocalKey key,
    this.size = 16.0, 
    //This is the size of the gap between ExpansionTiles WHEN EXPANDED
}) : assert(key != null),
   super(key);

此大小变量仅在 EXPANDED 时控制扩展块之间的间隙。设置“this.size = 0.0”应该消除差距。

如果您想知道这是为什么，长话短说，当定义小部件属性的 ExpansionPanels 列表(在 expand_panel.dart 中)时，将在子项之间添加“MaterialGap”。我们将 Material 间隙修改为 0.0，从而有效地消除了间隙。

你可以做的其他事情:

更改标题中的尾随图标。

Go to expand.dart file. Go to the bottom of the file where the build method should be. In the return statement, replace the icon button with 'whatever' you want (within reason).

@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));
  assert(debugCheckHasMaterialLocalizations(context));
  final MaterialLocalizations localizations = MaterialLocalizations.of(context);
  final String onTapHint = widget.isExpanded ? localizations.expandedIconTapHint : 
  localizations.collapsedIconTapHint;

  return Semantics(
    onTapHint: widget.onPressed == null ? null : onTapHint,
    child: Container() //Replaced the Icon Button here to remove it
  );
}

请记住，如果没有按钮，您必须使 canTapOnHeader: true ，否则您将不会
能够展开面板。你可以确保你不会忘记这样做
到 ExpansionPanel 构造函数并更改“this.canTapOnHeader = false;”到
"this.canTapOnHeader = true;

  ExpansionPanel({
    @required this.headerBuilder,
    @required this.body,
    this.isExpanded = false,
    this.canTapOnHeader = true, //Changed this to true from false
  }) : assert(headerBuilder != null),
       assert(body != null),
       assert(isExpanded != null),
       assert(canTapOnHeader != null);

删除阴影和/或分隔线

Go to the bottom of the expansion_panel.dart file. This is where the build method should be. At the bottom of the build method should be the return statement, which returns MergeableMaterial. You can do the following:

  return MergeableMaterial(
    hasDividers: false, //Change the boolean value of this
    children: items,
    elevation: 0, 
    //Add this line to remove shadow from elevation, REQUIRES ANOTHER STEP             
  );

如果添加“elevation: 0”属性，您必须返回到 mergeable_material.dart 并添加以下代码行:

void _paintShadows(Canvas canvas, Rect rect) {
    if (boxShadows == null) return; //ADD THIS LINE OF CODE
    for (BoxShadow boxShadow in boxShadows) {
      final Paint paint = boxShadow.toPaint();
      // TODO(dragostis): Right now, we are only interpolating the border radii
      // of the visible Material slices, not the shadows; they are not getting
      // interpolated and always have the same rounded radii. Once shadow
      // performance is better, shadows should be redrawn every single time the
      // slices' radii get interpolated and use those radii not the defaults.
      canvas.drawRRect(kMaterialEdges[MaterialType.card].toRRect(rect), paint);
    }
}

我想你明白了，你可以做更多的事情来删除填充和诸如此类的东西来处理常量。

顾虑

注意:事实上，我对 flutter 相对较新(去年夏天两个月，现在两个月 - 我是一名大学生)。我不知道修改这些文件可能会如何影响其他小部件，但我没有注意到这样做有任何问题。
这也是我的第一篇文章，所以请谨慎对待。修改 Material 实现可能会破坏一些我会引用文档的规则或约定。