如何使短ListView的DropDownButtons构建更快?

Question

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

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

在我的例子中，我将需要重建ListView的每一个项目的变化，所以这将是一个主要问题。

是否有一种方法使ListView构建更快，或者至少能够显示ProgressBar直到它构建?

N。B:使用--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: 
),
);
},
),
),
);
}
}