Flutter小技巧｜一个切换一个重新排序

IOS

2023-10-07 09:38:14

示例需求
本文以一个联系人和分页场景展开。首先，我们约定这样一个需求：

用户第一次进入联系人列表时，默认展示在线联系人。
列表的展示顺序为按ID排序（考虑到隐私保护这里使用匿名ID）。
用户可以主动切换为显示离线联系人，并可以根据姓名进行排序。
最终的效果如图所示：

[图片：联系人列表]

2. 基本思路

实现这个效果，常规思路是创建一个State类，并把数据获取和UI展示逻辑都写进去。但是这个类越写越复杂，不免感到有一丝臃肿。所以，这里我们尝试把业务复杂度拆解，让类本身更加聚焦和简单。

有了拆解的思路，我们的解决方式就非常清晰了：

Widget初始化时，我们可以把需要的数据先准备起来。
提供一个切换按钮，用户点击时切换展示数据，并调用排序接口排序数据。

3. Widget初始化方法重写

先来说说如何重写Widget的初始化方法。我们需要在初始化方法里面，把数据准备起来。

// 数据准备函数
Future<List> prepareData() {
  // 这里的数据准备过程略...
  return Future.delayed(
    Duration(seconds: 2),
    () => List.generate(10, (index) {
      // 数据对象
      return {
        'id': index,
        'name': '用户$index',
        'online': index % 2 == 0,
      };
    }),
  );
}

class ContactList extends StatefulWidget {
  @override
  _ContactListState createState() => _ContactListState();
}

class _ContactListState extends State<ContactList> {
  // 这里定义了当前数据
  List currentData = [];
  
  @override
  void initState() {
    // 调用数据准备函数
    prepareData().then((data) => setState(() {
      currentData = data;
    }));
    
    super.initState();
  }
}

这里，我们定义了一个prepareData函数，用来获取数据。然后在initState方法里调用prepareData函数，并在数据准备完毕后调用setState函数更新当前currentData。

4. 链式调用

当我们把需要的数据都准备好了，接下来就需要根据用户的输入来展示数据。我们将在这里使用链式调用。

Container(
  color: Colors.white,
  child: Column(
    children: <Widget>[
      // 排序按钮
      InkWell(
        onTap: () {
          // 根据姓名排序数据
          setState(() {
            currentData.sort((a, b) => a['name'].compareTo(b['name']));
          });
        },
        child: Text('姓名排序'),
      ),
      
      Expanded(
        child: ListView.builder(
          itemCount: currentData.length,
          itemBuilder: (context, index) {
            // 渲染列表
            return ListTile(
              title: Text(currentData[index]['name']),
            );
          },
        ),
      ),
    ],
  ),
);