Flutter: 为图片添加说明信息

实现效果

如下:

See the Pen
图片上添加说明文字
by pruidong (@pruidong)
on CodePen.

image-3209

实现

在Container布局中,将图片放在BoxDecoration中.这样图片自然就在底层了.之后在Positioned中进行描述信息的处理,样式,位置这些都可以完全自定义.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import 'package:flutter/material.dart';



/// 在图片上添加说明文字.
/// 在图片上使用浅黑色背景,添加说明文字.
///
///
/// prd
/// 2020-07-26


void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
            padding: EdgeInsets.all(2.0),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage( 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',),
                fit: BoxFit.cover,
              ),
            ),
            child: Stack(
              children: <Widget>[
                Positioned(
                  left: 2.0,
                  right: 2.0,
                  bottom: 2.0,
                  height: 70.0,
                  child: SingleChildScrollView(
                    child:Container(
                    padding: EdgeInsets.all(5.0),
                    decoration: BoxDecoration(
                        color: Colors.black45,
                        borderRadius: BorderRadius.all(Radius.circular(5.0))),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          "这是一段说明文字",
                          style: TextStyle(color: Colors.white,fontSize:22.0,),
                        ),
                        Text(
                          "可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字,可以滚动详细说明文字.",
                          style: TextStyle(color: Colors.white),
                        )
                      ],
                    ),
                  ),
                  )
                ),
              ],
            ),
          ),
    );
  }
}

发表评论

您的电子邮箱地址不会被公开。

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据