因此,我有一个按钮,当选择该按钮时,会将容器添加到列表中。当我再次选择按钮时,我想将其从列表中删除。当是文本时,这很容易做到,因为我刚刚传递了要删除的字符串,但是删除了我不知道的容器。
这是列表视图所在的页面,然后是控制按钮的页面。
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);
});
}
}