Flutter添加RefreshIndicator后Expanded报ParentDataWidget使用错误

问题 #

原本在Column的FutureBuilder组件内直接使用Expanded组件时一切正常，但添加RefreshIndicator组件后出现错误，无法找到原因。希望让ListView占满屏幕剩余高度，添加RefreshIndicator前功能正常。

原代码 #

return Scaffold(
      body: Column(
        children: [
          Row(...),
          FutureBuilder(
            future: ...,
            builder: (context, snapshot) {
              return RefreshIndicator(
                onRefresh: ...,
                child: getList(snapshot.connectionState, user),
              );
            },
          ),
        ],
      ),
    );


Widget getList(ConnectionState connectionState, UserRepository user) {
    switch (connectionState) {
      case ConnectionState.done:
        return Expanded(
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: number,
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                onTap: ...,
                child: Card(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      ...,
                      Expanded(
                        child: Container(
                          padding: ...,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                "",
                                softWrap: false,
                                overflow: TextOverflow.ellipsis,
                                style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
                              ),
                              Text(
                                "",
                                softWrap: false,
                                overflow: TextOverflow.ellipsis,
                                style: const TextStyle(fontSize: 14),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        );
      default:
        return const Text("other");
    }
  }

错误信息 #

The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.

The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type StackParentData.

Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a Stack widget.

The ownership chain for the RenderObject that received the incompatible parent data was:
  _ScrollSemantics-[GlobalKey#85a8f] ← NotificationListener<ScrollMetricsNotification> ← Scrollable ← PrimaryScrollController ← ListView ← Expanded ← NotificationListener<OverscrollIndicatorNotification> ← NotificationListener<ScrollNotification> ← Stack ← RefreshIndicator ← ⋯

解决方案 #

问题根源是Expanded被嵌套到了RefreshIndicator内部，而RefreshIndicator的底层实现包含Stack组件，Expanded只能直接作为Flex（Column/Row）的子组件，不能被其他组件包裹。

修改方案如下：

修改后的代码 #

return Scaffold(
      body: Column(
        children: [
          Row(...),
          // 把Expanded移到这里，直接作为Column的子组件
          Expanded(
            child: FutureBuilder(
              future: ...,
              builder: (context, snapshot) {
                return RefreshIndicator(
                  onRefresh: ...,
                  child: getList(snapshot.connectionState, user),
                );
              },
            ),
          ),
        ],
      ),
    );


Widget getList(ConnectionState connectionState, UserRepository user) {
    switch (connectionState) {
      case ConnectionState.done:
        // 移除这里的Expanded，让ListView直接作为RefreshIndicator的子组件
        return ListView.builder(
          shrinkWrap: true,
          itemCount: number,
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onTap: ...,
              child: Card(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    ...,
                    Expanded(
                      child: Container(
                        padding: ...,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "",
                              softWrap: false,
                              overflow: TextOverflow.ellipsis,
                              style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
                            ),
                            Text(
                              "",
                              softWrap: false,
                              overflow: TextOverflow.ellipsis,
                              style: const TextStyle(fontSize: 14),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        );
      default:
        // 给默认状态添加Center，避免布局偏移问题
        return const Center(child: Text("other"));
    }
  }

关键说明 #

• 将Expanded移到FutureBuilder外层，确保它直接属于Column，这样就能正确占据屏幕剩余空间
• 移除getList方法中ListView外层的Expanded，让ListView直接作为RefreshIndicator的子组件
• 默认状态的Text用Center包裹，避免出现布局错位

内容的提问来源于stack exchange，提问作者Garrett