Flutter（九）：Card

1 基础实例

import 'package:flutter/material.dart';

import 'res/listData.dart';

void main() {
  runApp(new MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView(
        children: <Widget>[
          Card(
            margin: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Image.asset(
                    "images/a.jpeg",
                    fit: BoxFit.cover,
                  ),
                ),
                ListTile(
                  leading: ClipOval(
                    child: Image.asset(
                      "images/a.jpeg",
                      height: 60,
                      width: 60,
                    ),
                  ),
                  title: Text('xxxx'),
                  subtitle: Text('xxxxxxxx'),
                ),
              ],
            ),
          ),
          Card(
            margin: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Image.asset(
                    "images/a.jpeg",
                    fit: BoxFit.cover,
                  ),
                ),
                ListTile(
                  leading: CircleAvatar(
                    // 专门处理头像组件
                    backgroundImage: AssetImage(
                        "images/a.jpeg"), // AssetImage \ NetworkImage
                  ),
                  title: Text('xxddddddxx'),
                  subtitle: Text('xxxxxxxx'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

效果

2 Card 动态数据渲染

import 'package:flutter/material.dart';

import 'res/listData.dart';

void main() {
  runApp(new MyApp());
}

// 自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      // Scaffold 定义导航头部和页面主要内容
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter 标题'),
        ),
        body: HomePage(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  List<Widget> _getList() {
    var templist = listData.map((val) {
      return Card(
        margin: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Image.network(
                val['imageUrl'],
                fit: BoxFit.cover,
              ),
            ),
            ListTile(
              leading: CircleAvatar(
                // 专门处理头像组件
                backgroundImage:
                    NetworkImage(val['imageUrl']), // AssetImage \ NetworkImage
              ),
              title: Text(val['title']),
              subtitle: Text(val['author']),
            ),
          ],
        ),
      );
    });
    return templist.toList();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView(
        children: this._getList(),
      ),
    );
  }
}

效果