Flutter从另一个窗口小部件的列表中删除窗口小部件

时间:2019-11-22 16:04:05

标签: flutter dart

因此,我有一个按钮,当选择该按钮时,会将容器添加到列表中。当我再次选择按钮时,我想将其从列表中删除。当是文本时,这很容易做到,因为我刚刚传递了要删除的字符串,但是删除了我不知道的容器。

这是列表视图所在的页面,然后是控制按钮的页面。

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:onlytag2/widget/tag.dart';

class TagPage extends StatefulWidget {
  DocumentSnapshot snapshot;
  final String category;
  final String title;
  final String tag;

  TagPage({this.snapshot, this.category, this.title, this.tag});

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

class _TagPageState extends State<TagPage> {
  List hashList = new List();
  StreamSubscription<QuerySnapshot> subscription;

  List<DocumentSnapshot> snapshot;

  Query collectionReference;

  void initState() {
    collectionReference = Firestore.instance
        .collection("mainCategories")
        .document(widget.category)
        .collection("subCategories")
        .document(widget.tag)
        .collection('tags').orderBy("title");
    subscription = collectionReference.snapshots().listen((datasnapshot) {
      setState(() {
        snapshot = datasnapshot.documents;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    subscription.cancel(); //Streams must be closed when not needed
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (snapshot == null) return Center(
      child: Container(
        color: Colors.black,
        alignment: AlignmentDirectional(0.0, 0.0),
        child: Container(
          color: Colors.black,
          constraints: BoxConstraints(
              maxHeight: 300.0,
              maxWidth: 200.0,
              minWidth: 150.0,
              minHeight: 150.0
          ),
          child: CircularProgressIndicator(),
        ),
      ),
    );
    return Scaffold(
        backgroundColor: Color(0xff0E0E0F),
        appBar: AppBar(
          iconTheme: IconThemeData(
            color: Color(0xffff9900),
          ),
          centerTitle: true,
          backgroundColor: Colors.black,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text(
                "#",
                style: TextStyle(
                    fontSize: 25,
                    color: Color(0xffff9900),
                    fontFamily: 'Dokyo'),
              ),
              Text(
                widget.title,
                style: TextStyle(color: Colors.white, fontFamily: 'Dokyo'),
              )
            ],
          ),
        ),
        body: Column(children: <Widget>[
          Expanded(
            flex: 3,
            child: Container(
                width: MediaQuery.of(context).size.width*0.8,
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: ListView.builder(
                          itemCount: hashList.length,
                          itemBuilder: (context, index){
                            return Container(
                              child: hashList[index],
                            );
                          }),
                    )
                  ],

                ),
                color: Colors.blue),
          ),
          Expanded(
            flex: 6,
            child: Container(
              color: Colors.black,
              child: ListView.builder(
                itemCount: snapshot.length,
                itemBuilder: (context, index) {
                  return Tag(
                    callback: (list) => setState(() => hashList = list),
                    tag: snapshot[index].data["title"],
                    list: hashList,
                  );
                },
              )
    ))]),

    );
  }
}

列表有一个回调

import 'package:flutter/material.dart';

class Tag extends StatefulWidget {
  final String tag;
  List list;
  Function(List) callback;

  Tag(
      {Key key,
        @required this.tag,
        this.list, this.callback
      })
      : super(key: key);

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

class _TagState extends State<Tag> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  bool isSelected = false;

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
  }

  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
  }

  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 5, 0, 5),
      height: 50,
      decoration: BoxDecoration(
          color: isSelected ? Color(0xffff9900) : Colors.black,
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(10)),
      child: InkWell(
        onTap: () {
          _handleOnPressed();
          print(isSelected);
          widget.callback?.call(widget.list);
        },
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
                padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                alignment: Alignment.centerLeft,
                child: Text(
                  widget.tag,
                  style: TextStyle(
                      fontSize: 20,
                      color: isSelected ? Colors.black : Colors.white,
                      fontFamily: 'Dokyo'),
                )),
            Container(
                padding: EdgeInsets.fromLTRB(0, 0, 20, 0),
                child: AnimatedIcon(
                  icon: AnimatedIcons.home_menu,
                  progress: _animationController,
                  color: isSelected ? Colors.black : Colors.white,
                ))
          ],
        ),
      ),
    );
  }

  void _handleOnPressed() {
    setState(() {
      isSelected = !isSelected;
      isSelected
          ? _animationController.forward()
          : _animationController.reverse();
      isSelected ? widget.list.add(
          Container(
            height: 30,
            color: Colors.green,
            child: Text(widget.tag, style: TextStyle(color: Colors.purple),),
          )): widget.list.remove(widget.tag);
    });
  }
}

0 个答案:

没有答案