如何在Flutter中使用streambuilder构建扩展面板?

时间:2020-08-04 16:13:52

标签: flutter

我无法为扩展面板列表小部件的波动示例实现Streambuilder。我找不到有关此主题的太多信息,所以我几乎陷在这里。 我认为我应该用streambuilder替换那个generateitems部分,但是我不确定。我刚刚开始学习颤动。

任何帮助将不胜感激。

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';


class ExpansionPanelScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue[50],
      appBar: AppBar(
        title: Text('test'),
        backgroundColor: Colors.blue[400],
        elevation: 0.0,
        actions: <Widget>[
          FlatButton.icon(
              onPressed: () async {
                await _auth.signout();
              },
              icon: Icon(Icons.person),
              label: Text('LogOut'))
        ],
      ),
      body: PanelList(),
    );
  }
}

//stores ExpansionPanel state information
class Item {
  Item({
    this.id,
    this.expandedValue,
    this.headerValue,
  });

  int id;
  String expandedValue;
  String headerValue;
}

List<Item> generateItems(int numberOfItems) {
  return List.generate(numberOfItems, (int index) {
    return Item(
      id: index,
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

class PanelList extends StatefulWidget {
  PanelList({Key key}) : super(key: key);

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

class _PanelListState extends State<PanelList> {
  List<Item> _data = generateItems(8);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: _buildPanel(),
      ),
    );
  }

  Widget _buildPanel() {
    return ExpansionPanelList.radio(
      initialOpenPanelValue: 2,
      children: _data.map<ExpansionPanelRadio>((Item item) {
        return ExpansionPanelRadio(
            canTapOnHeader: true,
            value: item.id,
            headerBuilder: (BuildContext context, bool isExpanded) {
              return ListTile(
                title: Text(item.headerValue),
              );
            },
            body: ListTile(
                title: Text(item.expandedValue),
                subtitle: Text('To delete this panel, tap the trash can icon'),
                trailing: Icon(Icons.delete),
                onTap: () {
                  setState(() {
                    _data.removeWhere((currentItem) => item == currentItem);
                  });
                }));
      }).toList(),
    );
  }


}


0 个答案:

没有答案