flutter利用Stack实现Image列表介绍文字

首先,我们先看效果

实现效果

---

我们要用到 Stack 组件,他可以让控件在不同层级显示,这样,我们就可以在图片上显示文字了

Stack组件只能统一设置控件的位置,如果你有需要,可以配合 Align 组件设置每一个控件的摆放位置

Stack 组件 通过 alignment 属性来设置,他的值为Alignment类的一些属性,请自行查看

属性	解释
Alignment.center	居中显示
Alignment.topCenter,	靠上居中
Alignment.bottomCenter,	底部居中

我们说下思路

1. 我们要实现如图效果,可以用ListView来实现

2. 我们最外面使用一个Container 来设置padding和高度,这样,我们的图片可以有一个统一的尺寸

3.Container 的child就用Stack来布局

4.此处如果你对每一个控件的摆放位置都有要求,则需要使用Align来设置布局的显示位置

---

我们先创建一个数据 data.dart

List dataList = [
  {
    "userName":"张三丰",
    "detail":"加qq一起学习吧",
    "avatar":"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590884216&di=e086131b449ec5d0cdddad875e8ae209&src=http://01.minipic.eastday.com/20161215/20161215154634_940b4d487aedf8f5c0931f7f3591781b_1.jpeg",
  },{
    "userName":"张三",
    "detail":"45598021",
    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590894347326&di=fb206cb7ca2aad934ca187ee72249e3d&imgtype=0&src=http%3A%2F%2Fres.img.ifeng.com%2F2012%2F0201%2Fxes_2bb8a4768052c759bfcb69c83a3f5030.jpg",
  },{
    "userName":"李四",
    "detail":"或者QQ群",
    "avatar":"https://img.tupianzj.com/uploads/allimg/201909/9999/38e9633588.jpg",
  },
  {
    "userName":"张三丰",
    "detail":"哈哈哈哈",
    "avatar":"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590884216&di=e086131b449ec5d0cdddad875e8ae209&src=http://01.minipic.eastday.com/20161215/20161215154634_940b4d487aedf8f5c0931f7f3591781b_1.jpeg",
  },{
    "userName":"张三",
    "detail":"你昨天去哪里了",
    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590894347326&di=fb206cb7ca2aad934ca187ee72249e3d&imgtype=0&src=http%3A%2F%2Fres.img.ifeng.com%2F2012%2F0201%2Fxes_2bb8a4768052c759bfcb69c83a3f5030.jpg",
  },{
    "userName":"李四",
    "detail":"哈哈哈,是吗",
    "avatar":"https://img.tupianzj.com/uploads/allimg/201909/9999/38e9633588.jpg",
  }
];

继续贴上完整代码 main.dart

import 'package:flutter/material.dart';
import 'res/data.dart';   //引入数据文件

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("QQ45598021"),
        ),
        body: HomeContent(),   //将内容部分抽离出来,单独一个类做处理
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  List getData() {
    var tempList = dataList.map((e) {
      return Container(
        height: 200,  //定义图片的总体高度
        padding: EdgeInsets.fromLTRB(10, 10, 10, 0),  //设置外边距
        child: Stack(   //通过Stack实现层级布局
          children: [
            Align(
              alignment: Alignment.bottomCenter,
              child: Image.network(   //读取图片,如果你的图片是本地的,请换成asset
                e['avatar'],
                fit: BoxFit.cover,    //图片裁剪属性
                width: double.infinity,    //必须设置,否则图片会等比缩放,主要是缩小,这样,图片并不会撑满整个布局
                height: double.infinity,   //必须设置,否则图片会等比缩放,主要是缩小,这样,图片并不会撑满整个布局,你可以注释掉试试
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Text(
                e['userName'],
                style: TextStyle(
                    color: Colors.green,
                    fontSize: 30,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Text(
                e['detail'],
                style: TextStyle(
                    color: Colors.orange,
                    fontSize: 24,
                    fontWeight: FontWeight.bold),
              ),
            )
          ],
        ),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(children: getData());   //ListView 的数据,我们通过一个自定义的方法来实现,看上面这个方法getData
  }
}