Flutter （-2-） Widget 數據綁定

                                                  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('添加'),
        )
      ],
    );
  }
}