美文网首页
Flutter Widget框架概述

Flutter Widget框架概述

作者: CocoaJason | 来源:发表于2019-06-10 17:00 被阅读0次

https://flutterchina.club/widgets-intro/#%E5%93%8D%E5%BA%94widget%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E4%BA%8B%E4%BB%B6

import 'package:flutter/material.dart';

class Product{
  final String name;
  const Product({this.name});
}

typedef void CartChangeCallBack(Product product,bool inCart);

class ShopingListItem extends StatelessWidget{

  final Product product;
  final bool inCart;
  final CartChangeCallBack onCartChanged;

  ShopingListItem({Product product,this.inCart,this.onCartChanged})
  :product = product,
  super(key:new ObjectKey(product));
  
  Color _getColor(BuildContext context){
    return inCart ? Colors.black54 : Theme.of(context).primaryColor;
  }

  TextStyle _getTextStyle(BuildContext context){
    if(!inCart) return null;
    return new TextStyle(
      color: Colors.black54,
      decoration: TextDecoration.lineThrough,
    );
  }

  @override
  Widget build(BuildContext context) {
    return new ListTile(
      onTap:(){
        onCartChanged(product,!inCart);
      },
      leading:new CircleAvatar(
         backgroundColor: _getColor(context),
        child:new Text(product.name[0]),
      ),
      title: new Text(product.name,style:_getTextStyle(context)),
    );
  }
}

class ShoppingList extends StatefulWidget {
  final List<Product> products;
  ShoppingList({Key key,this.products}) : super(key: key);

  _ShoppingListState createState() => _ShoppingListState();
}

class _ShoppingListState extends State<ShoppingList> {
  Set<Product> _shoppingCart = new Set<Product>();

  void _handleCartChanged(Product product, bool inCart){
    setState((){
      if(inCart){
        _shoppingCart.add(product);
      }else{
        _shoppingCart.remove(product);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar:new AppBar(
         title: new Text('Shopping List'),
       ),
       body: new ListView(
         padding: new EdgeInsets.symmetric(vertical: 8.0),
         children:widget.products.map((Product product){
           return new ShopingListItem(
             product:product,
             inCart:_shoppingCart.contains(product),
             onCartChanged:_handleCartChanged,
           );
         }).toList(),
       ),
    );
  }
}
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shopping App',
    home: new ShoppingList(
      products: <Product>[
        new Product(name: 'Eggs'),
        new Product(name: 'Flour'),
        new Product(name: 'Chocolate chips'),
      ],
    ),
    );
  }
}

相关文章

网友评论

      本文标题:Flutter Widget框架概述

      本文链接:https://www.haomeiwen.com/subject/haftfctx.html