如何使 DropDownButtons 的短 ListView 构建得更快？

Question

我有一个简短的ListView，最多包含 10 个项目。每个列表项都将包含一个DropDownButton，它将容纳大约 1K 个DropDownMenuItems 以供选择。

在原生 Android 中，我能够实现一个运行非常流畅的功能，但使用 Flutter 构建 ListView 需要一段时间，这会导致 UI 冻结。

在我的情况下，我需要在 ListView 中的一项发生每次更改时重建它，所以这将是一个主要问题。

有没有办法让 ListView 构建得更快，或者至少能够在构建之前显示ProgressBar？

注意：使用--profile 配置来模拟发布版本可以大大提高性能，但仍然感觉卡顿。

这是我的示例代码，如果您想自己测试，可以直接复制/粘贴。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool showList = false;
  final List<DropdownMenuItem<int>> selections = List.generate(
    1000,
    (index) => DropdownMenuItem<int>(
      value: index,
      child: Text("$index"),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          width: double.infinity,
          child: Column(
            children: [
              ElevatedButton(
                child: Text("toggle list visibility"),
                onPressed: () {
                  setState(() {
                    showList = !showList;
                  });
                },
              ),
              Expanded(
                child: showList
                    ? ListView.builder(
                        cacheExtent: 2000,
                        itemCount: 10,
                        itemBuilder: (context, index) {
                          return Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Center(
                              child: Container(
                                height: 200,
                                color: Colors.green,
                                child: Column(
                                  children: [
                                    Text("List Item: $index"),
                                    DropdownButton<int>(
                                      onChanged: (i) {},
                                      value: 1,
                                      items: selections,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          );
                        })
                    : Text("List Not Built"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

点击按钮时加载下拉菜单。

在您的主列表视图中添加此小部件

   InkWell(
          onTap: () {
            showDialog(
                context: context,
                builder: (_) {
                  return VendorListAlert(selectVendor: selectVendorTap);
                });
          },
          child: // create a widget, looks like your drop down
        ),

处理点击事件

void selectVendorTap(pass your model){
// logic
}

自定义警报示例

不需要创建可变的小部件，不可变的小部件更好。

class VendorListAlert extends StatefulWidget {
  final Function selectVendor;

  const VendorListAlert({Key key, this.selectVendor}) : super(key: key);

  @override
  _VendorListAlertState createState() => _VendorListAlertState();
}

class _VendorListAlertState extends State<VendorListAlert> {
  List<UserModel> _searchVendor = [];

  @override
  void initState() {
    super.initState();
    _searchVendor = List.from(ypModel);
  }

  @override
  Widget build(BuildContext context) {

    return AlertDialog(
      content: Container(
        width: width,
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: _searchVendor.length,
          itemBuilder: (BuildContext context, int index) {
            return Card(
              child: InkWell(
                onTap: () {
                  widget.selectVendor(_searchVendor[index]);
                  Navigator.pop(context);
                },
                child: 
              ),
            );
          },
        ),
      ),
    );
  }
}