美文网首页Flutter学习笔记
Flutter 的小卡片Card

Flutter 的小卡片Card

作者: 王俏 | 来源:发表于2019-10-10 10:48 被阅读0次

    /model/post.dart

    class Post {
      Post({
        this.title,
        this.author,
        this.imageUrl,
        this.description,
      });
    
      final String title;
      final String author;
      final String imageUrl;
      final String description;
    
      bool selected = false;
    }
    
    final List<Post> posts = [
      Post(
        title: 'Candy Shop',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
        imageUrl: 'https://resources.ninghao.org/images/candy-shop.jpg',
      ),
      Post(
        title: 'Childhood in a picture',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/childhood-in-a-picture.jpg',
      ),
      Post(
        title: 'Contained',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/contained.jpg',
      ),
      Post(
        title: 'Dragon',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/dragon.jpg',
      ),
      Post(
        title: 'Free Hugs',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/free_hugs.jpg',
      ),
      Post(
        title: 'Gravity Falls',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/gravity-falls.png',
      ),
      Post(
        title: 'Icecream Truck',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/icecreamtruck.png',
      ),
      Post(
        title: 'keyclack',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/keyclack.jpg',
      ),
      Post(
        title: 'Overkill',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/overkill.png',
      ),
      Post(
        title: 'Say Hello to Barry',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/say-hello-to-barry.jpg',
      ),
      Post(
        title: 'Space Skull',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/space-skull.jpg',
      ),
      Post(
        title: 'The Old Fashioned',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/the-old-fashioned.png',
      ),
      Post(
        title: 'Tornado',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/tornado.jpg',
      ),
      Post(
        title: 'Undo',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/undo.jpg',
      ),
      Post(
        title: 'White Dragon',
        author: 'Mohamed Chahin',
        description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',    
        imageUrl: 'https://resources.ninghao.org/images/white-dragon.jpg',
      )
    ];
    

    Card

    import 'package:flutter/material.dart';
    import '../model/post.dart';
    
    class CardDemo extends StatefulWidget {
      @override
      _CardDemoState createState() => _CardDemoState();
    }
    
    class _CardDemoState extends State<CardDemo> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('CardDemo'),
            elevation: 0.0,
          ),
          body: Container(
            padding: EdgeInsets.all(16.0),
            child: ListView(
              children: posts.map((post) {
                return Card(
                  child: Column(
                    children: <Widget>[
                      AspectRatio(
                        aspectRatio: 16 / 9,
                        child: ClipRRect(
                          //圆角效果
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(4.0),
                            topRight: Radius.circular(4.0),
                          ),
                          child: Image.network(
                            post.imageUrl,
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                      ListTile(
                        leading: CircleAvatar(
                            backgroundImage: NetworkImage(post.imageUrl)),
                        title: Text(post.title),
                        subtitle: Text(post.author),
                      ),
                      Container(
                        padding: EdgeInsets.all(16.0),
                        child: Text(post.description,
                            maxLines: 2, overflow: TextOverflow.ellipsis),
                      ),
                      ButtonTheme.bar(
                        child: ButtonBar(
                          children: <Widget>[
                            FlatButton(
                              child: Text('Like'.toUpperCase()),
                              onPressed: () {},
                            ),
                            FlatButton(
                              child: Text('Read'.toUpperCase()),
                              onPressed: () {},
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              }).toList(),
            ),
          ),
        );
      }
    }
    
    

    相关文章

      网友评论

        本文标题:Flutter 的小卡片Card

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