Flutter中FutureBuilder内Future<List>列表的按钮点击排序实现问题

• 你声明的List<Post> posts = []全程没有被赋值，始终是空列表，对空列表做排序自然没有效果。
• 你渲染列表时读取的是FutureBuilder的snapshot.data，这是接口返回的一次性不可变快照，和你声明的posts变量是完全独立的两份数据，排序操作根本作用不到渲染的列表上。
• FutureBuilder的future只初始化一次的前提下，setState触发的UI刷新不会重新执行future的逻辑，直接修改snapshot里的内容也不会触发列表重排。

1. 调整State类的数据存储逻辑 #

把接口拉取到的列表存到State的持久成员变量中，作为排序操作的实际数据源，避免依赖不可变的快照数据：

// State类内的成员变量
List<Post> posts = []; //  持久存储全量接口数据，排序直接操作该列表
bool isAscending = true; //  记录当前排序方向，按钮点击时切换
late Future<List<Post>> futurePosts;

@override
void initState() {
  super.initState();
  //  仅在initState中初始化一次future，避免build阶段重复发起接口请求
  futurePosts = fetchPosts().then((fetchedList) {
    //  接口请求成功后，把返回的数据赋值给持久存储的posts列表
    posts = fetchedList;
    //  首次加载时执行默认升序排序
    posts.sort((a, b) => a.id.compareTo(b.id));
    return posts;
  });
}

2. 修正按钮点击的排序逻辑 #

点击按钮时切换排序方向，直接操作持久存储的posts列表，再触发setState刷新UI：

MaterialButton(
  color: Colors.grey,
  onPressed: () {
    setState(() {
      //  切换排序方向
      isAscending = !isAscending;
      //  根据当前方向执行排序逻辑
      posts.sort((a, b) {
        if (isAscending) {
          return a.id.compareTo(b.id);
        } else {
          return b.id.compareTo(a.id);
        }
      });
    });
  },
  child: Text(isAscending ? '按ID升序排列' : '按ID降序排列'),
)

3. 调整FutureBuilder的渲染逻辑 #

等接口数据加载完成后，直接读取持久存储的posts列表做渲染，让排序操作能直接作用到渲染的UI上：

FutureBuilder<List<Post>>(
  future: futurePosts,
  builder: (context, snapshot) {
    //  数据加载中状态
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    //  请求报错状态
    if (snapshot.hasError) {
      return Text("加载失败：${snapshot.error}");
    }
    //  数据加载完成状态，直接渲染持久存储的posts列表
    return ListView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemCount: posts.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('ID：${posts[index].id}'),
        );
      },
    );
  },
)

• 不要对snapshot.data做原地排序修改：快照是只读的临时数据，修改它不会关联到UI渲染逻辑，排序操作必须作用到State中持久存储的列表上。
• 不要在build方法里重新给futurePosts赋值：否则每次setState触发重建时，都会重复发起接口请求，之前的排序结果会被新返回的未排序数据覆盖。
• 外层嵌套SingleChildScrollView时，内部的ListView.builder必须设置shrinkWrap: true和physics: NeverScrollableScrollPhysics()，否则会出现滚动冲突、列表高度异常的问题。

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