Flutter之ExpansionTile实现以代码方式码折叠、展开

最新推荐文章于 2025-09-07 13:36:30 发布

原创

最新推荐文章于 2025-09-07 13:36:30 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #ExpansionTIle #折叠 #展开

文章介绍了如何通过复制Flutter的ExpansionTile源码并进行修改，创建一个名为CustomExpansionTile的自定义组件，以便能通过代码控制其展开和折叠状态。修改包括去除_state前缀以访问State，添加了collapse()和expand()方法，以及如何使用GlobalKey来操纵这些方法。

Flutter自带的ExpansionTile只能通过点击标题触发展开和折叠，有时候我们想要以代码的方式控制，那满足不了我们的需求。我们只能修改源码。

复制源码

复制ExpansionTile的源码到一个新的dart文件中，比如CustomExpansionTile。修改类名

// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

const Duration _kExpand = Duration(milliseconds: 200);

/// A single-line [ListTile] with an expansion arrow icon that expands or collapses
/// the tile to reveal or hide the [children].
///
/// This widget is typically used with [ListView] to create an
/// "expand / collapse" list entry. When used with scrolling widgets like
/// [ListView], a unique [PageStorageKey] must be specified to enable the
/// [ExpansionTile] to save and restore its expanded state when it is scrolled
/// in and out of view.
///
/// This class overrides the [ListTileThemeData.iconColor] and [ListTileThemeData.textColor]
/// theme properties for its [ListTile]. These colors animate between values when
/// the tile is expanded and collapsed: between [iconColor], [collapsedIconColor] and
/// between [textColor] and [collapsedTextColor].
///
/// The expansion arrow icon is shown on the right by default in left-to-right languages
/// (i.e. the trailing edge). This can be changed using [controlAffinity]. This maps
/// to the [leading] and [trailing] properties of [ExpansionTile].
///
/// {@tool dartpad}
/// This example demonstrates different configurations of ExpansionTile.
///<