Question

我正在尝试动态创建一个ExpansionPanelList，每个ExpansionPanel由我的API REST服务提供。

我已将我的API连接到我的应用，并且可以列出所有产品：

ProductosProvider：

List<ProductoModel> _productos = new List();
final _productosStreamController = StreamController<List<ProductoModel>>.broadcast();
Function(List<ProductoModel>) get productosSink => _productosStreamController.sink.add;
Stream<List<ProductoModel>> get productosStream => _productosStreamController.stream;

列出产品方法：

Future<ProductList> listaProductos() async {
    // Call API
    final resp = await http.get(_url);
    final decodedData = json.decode(resp.body);
    final productos = new ProductList.fromJsonList( decodedData );
    _productos.addAll(productos.items);
    productosSink( _productos );
    return productos;
  }

因此，调用此 listaProductos 方法，我可以列出远程数据库中的所有产品。

在我的小部件页面上：

class _CartaPageState extends State<CartaPage> {
  // Create provider
  ProductosProvider productosProvider;
...
   @override
  Widget build(BuildContext context) {
    // Initialize provider
    productosProvider = new ProductosProvider();
    // Listen data
    final productos = productosProvider.listaProductos();
  );

这是我遇到的问题，我想使用 StreamBuilder

创建 ExpansionPanelList

Widget _listaProductos( Buildcontext context ) {
return StreamBuilder(
      // Suscribe to stream
      stream: productosProvider.productosStream,
      builder: ( context , AsyncSnapshot<List<ProductoModel>> snapshot) {
        if ( snapshot.hasData ) {
          final productos = snapshot.data ?? [];
          // Creamos la lista de items
          // This method transform Producto List to Item List
          productosItems = productosProvider.productosToList();
          return ExpansionPanelList(
            animationDuration: Duration( milliseconds: 500 ),
            expansionCallback: (int index, bool isExpanded) {
              setState(() {
                productosItems[index].isExpanded = !isExpanded;
              });
            },
            children: productosItems.map<ExpansionPanel>((Item item) {
              return ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) {
                  return ListTile(
                    title: Text(item.headerValue),
                  );
                },
                body: ListTile(
                  title: Text(item.expandedValue),
                ),
                isExpanded: item.isExpanded,
              );
            }).toList()
            ...
}

这样，我的productosItem一直在刷新，并且状态没有更新，因此ExpansionPanel从未打开/折叠。

我不知道我是否在正确的位置声明提供程序，是否productosToList必须不在提供程序之外...

提前谢谢

如何在Flutter上从API的模型创建ExpansionPanelList？

0 个答案: