Flutter Card 卡片布局

最新推荐文章于 2024-08-01 15:30:00 发布

安果移不动

最新推荐文章于 2024-08-01 15:30:00 发布

阅读量347

点赞数

分类专栏： 042Flutter

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/114837593

版权

042Flutter 专栏收录该内容

135 篇文章 26 订阅

订阅专栏

import 'package:flutter/material.dart';
import 'package:flutter_by_bilibili/bean/post.dart';

class CardDemo extends StatefulWidget {
  @override
  _TempleteDemoState createState() => _TempleteDemoState();
}

class _TempleteDemoState extends State<CardDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("CardDemo"),
        elevation: 0,
      ),
      body: ListView(
        children: posts.map((post) {
          return Card(
            child: Column(
              children: [
                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,
                  ),
                ),
                ButtonBar(
                  children: [FlatButton(onPressed: () {}, child: Text('LIKE')),FlatButton(onPressed: () {}, child: Text('READ'))],
                ),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
}

效果