如何在 Flutter 中实现这种排序查询？

Posted 2023-02-23

【中文标题】如何在 Flutter 中实现这种排序查询？

【英文标题】：How to achieve this kind of sorting query in Flutter?

【发布时间】：2021-09-01 12:24:53

【问题描述】：

IM 试图通过下图实现外观，数据来自本地数据库，使用 sqflite。

我有 db "model" 类和用于 int 的 db 类，查询方法 ext..

  //call form db, two columns with specific category:

  Future<List<Confession>> getList(String query1, String query2) async 

    await initDatabase();  

    List<Map> list = await _db.rawQuery(
        'SELECT DISTINCT $query1,Classification FROM movies WHERE Category=("$query2") AND id ORDER by Classification'); 
  
    return list.map((confession) => Confession.fromJson(confession)).toList();
  

在我的用户 UI 类 IM 构建小部件中，如下所示：

 Widget _summaryItem(String title, String queryCategory) 
    return Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(6.0)),
          border:
              Border.all(color: Color.fromRGBO(199, 199, 199, 1), width: 1.0),
          boxShadow: [
            BoxShadow(color: Color.fromRGBO(5, 5, 5, 0.2), blurRadius: 5.0)
          ],
        ),
        child: Center(
          child: ExpansionTile(
            title: RichText(
              text: TextSpan(
                  text: '$title\n',
                  style: GoogleFonts.openSans(
                      color: Color.fromRGBO(165, 91, 83, 1),
                      fontSize: 16.0,
                      fontWeight: FontWeight.bold),
                  children: [
                    TextSpan(
                        text: "Category:",
                        style: GoogleFonts.openSans(
                            fontSize: 12, fontWeight: FontWeight.w300)),
                  ]),
            ),
            children: [
              Divider(
                thickness: 2,
              ),
                   FutureBuilder<List<Confession>>(
                      future: dbService.getList(
                          query1: 'OutputSummary', query2: queryCategory),
                      builder: (context, snapshot) 
                        if (!snapshot.hasData) 
                          return Center(
                            child: CircularProgressIndicator(),
                          );
                        
                        return ListView.builder(
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            itemCount: snapshot.data.length,
                            itemBuilder: (context, index) 
                              return _outPut(
                                  snapshot.data[index].outputsummary,
                                  classification:
                                      snapshot.data[index].classification);
                            );
                      )

            ],
          ),
        ));
  

我最终会得到类似下面的图片，不要介意标题，这只是模拟......

那么如何使列表像第一张图片一样，我是对每个分类进行查询然后加入列表还是有其他方式？

【参考方案1】：

您可以为列表使用可扩展的小部件

您将在此链接中获得答案 expandable_widget

【讨论】：

我已经使用了 ExpansionTile ，分类“子类别”不必是可扩展的，只需要像标题一样。