Flutter (-2-) Widget 數據綁定
大致效果如下:添加和刪除數據
項目一共有三個腳本
- DataCard.dart 顯示數據綁定的 Widget
- datas.dart 綁定的數據類型
- main.dart 主文件
datas.dart
class Dates {
String text;
String author;
// Dates(String text, String author){
// this.text = text;
// this.author = author;
// }
Dates({this.text, this.author});
}
DataCard.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'datas.dart';
class DataCard extends StatelessWidget{
final Dates data;
final Function delete;
// DataCard(this.data,this.delete);
DataCard({this.data,this.delete});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Card(
margin: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
data.text,
style: TextStyle(
fontSize: 18.0,
color: Colors.black
),
),
SizedBox(height: 6.0),
Text(
data.author,
style: TextStyle(
fontSize: 14.0,
color: Colors.orangeAccent
),
),
SizedBox(height: 8.0),
FlatButton.icon(
onPressed: delete,
icon:Icon(Icons.delete),
label: Text('刪除'),
)
],
),
),
);
}
}
main.dart
import 'package:first_app/DataCard.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'datas.dart';
void main() => runApp(MaterialApp(home: Home()));
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<Dates> dates = [
Dates(text: "hello world", author: "美國IBM"),
Dates(text: "hello flutter", author: "印度塔塔"),
Dates(text: "hello erveryone", author: " 地球"),
];
onDeleteItem(){
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("王大錘"),
centerTitle: true,
backgroundColor: Colors.grey[850],
),
body: Column(
// children: dates.map((data)=> DataCard(data,(){
// //print('刪除 你');
// setState(() {
// dates.remove(data);
// });
// })).toList(),
children: dates.map((data)=> DataCard(
data:data,
delete:(){
//print('刪除 你');
setState(() {
dates.remove(data);
});
})).toList(),
),
persistentFooterButtons: <Widget>[
FlatButton.icon(
onPressed: (){
setState(() {
dates.add( Dates(text: "666666", author: "9999999"),);
});
},
icon:Icon(Icons.add),
label: Text('添加'),
)
],
);
}
}