Dart 怎样才能把影像放在影像里飘荡

就像我们在大图中看到的小圆形图像。以及如何按照图片中的顺序排列文本

---

需要一些小部件才能完成您想要实现的目标。以下是我将如何解决它（可能需要一些微调以满足您的确切需求，但应该让您开始）：

首先从背景开始（我相信你称之为大局）。为此，您可以使用

容器

小部件绘制矩形，并使用

框装饰

小部件设置

装饰

属性来设置背景图像

接下来，使用包含圆形图像的

行

小部件和包含文本元素的

列

小部件，设置

容器

小部件的

子

属性

整个事情可能看起来像这样：

new Container(
    decoration: new BoxDecoration(
        image: new DecorationImage(
            image: new AssetImage('assets/images/card_background.png'),
            fit: BoxFit.cover,
        ),
    ),
    child: new Row(
        children: <Widget>[
            new CircleAvatar(
                backgroundImage: new AssetImage('assets/images/avatar.png')
            ),
            new Column(
                children: <Widget>[
                    new Text('David Borg'),
                    new Text('Title: Flying Wing'),
                ],
            ),
        ],
    ),
)

新容器(
装饰：新盒子装饰(
图片：新装饰图片(
图片：新资产评估（'assets/images/card_background.png'），
适合：BoxFit.cover，
),
),
孩子：新的一排(
儿童：[
新圆星(
背景图像：新资产图像（'assets/images/avatar.png'））
),
新专栏(
儿童：[
新文本（“David Borg”），
新文本（“标题：飞翼”），
],
),
],
),
)

以下是对上述代码片段中使用的最重要小部件的一些参考：

• 小部件
• 小部件
• 小部件
• 小部件
• 小部件

请注意，我尚未测试代码段中列出的代码，因此可能需要对其进行一些调整。

Widget build（BuildContext）{
Widget build(BuildContext context) {
  return new Container(
    height: 150.0,
    margin: new EdgeInsets.all(10.0),
    decoration: new BoxDecoration(borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
        gradient: new LinearGradient(colors: [Colors.yellow[700], Colors.redAccent],
            begin: Alignment.centerLeft, end: Alignment.centerRight, tileMode: TileMode.clamp)),
    child: new Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        new Padding(padding: new EdgeInsets.only(left: 10.0, right: 10.0),
          child: new CircleAvatar(radius: 35.0, backgroundImage: NetworkImage('https://wallpapercave.com/wp/wp2365076.jpg'),)
        ),
        new Expanded(child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new Text('New York', style: new TextStyle(fontSize: 20.0, color: Colors.white70, fontWeight: FontWeight.bold),),
            new SizedBox(height: 8.0,),
            new Text('Sunny', style: new TextStyle(fontSize: 12.0, color: Colors.white70),),
            new SizedBox(height: 10.0,),
            new Row(children: <Widget>[
              new Column(children: <Widget>[
                new Text('2342', style: new TextStyle(fontSize: 12.0, color: Colors.white)),
                new Text('Popularity', style: new TextStyle(fontSize: 10.0, color: Colors.white)),
              ],),
              new Column(children: <Widget>[
                new Text('2342', style: new TextStyle(fontSize: 12.0, color: Colors.white)),
                new Text('Like', style: new TextStyle(fontSize: 10.0, color: Colors.white)),
              ],),
              new Column(children: <Widget>[
                new Text('2342', style: new TextStyle(fontSize: 12.0, color: Colors.white)),
                new Text('Followed', style: new TextStyle(fontSize: 10.0, color: Colors.white)),
              ],)
            ],)
          ],)),
        new Padding(padding: new EdgeInsets.only(left: 10.0, right: 10.0),
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
            new Text('12°', style: new TextStyle(fontSize: 30.0, color: Colors.white70),),
            new Text('Ranking', style: new TextStyle(fontSize: 14.0, color: Colors.white70),),
          ],))

      ],),
  );
}

退回新货柜(
高度：150.0，
边距：所有新边集（10.0），
装饰：新框装饰（borderRadius:new borderRadius.all（new Radius.circular（10.0）），
渐变：新的LinearGradient（颜色：[颜色.黄色[700]，颜色.红色调]，
开始：Alignment.centerLeft，结束：Alignment.centerRight，tileMode:tileMode.clamp），
孩子：新的一排(
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
新填充（填充：仅限新边集（左：10.0，右：10.0），
子项：新CircleAvatar（半径：35.0，背景图像：NetworkImage（'https://wallpapercave.com/wp/wp2365076.jpg'),)
),
新扩展（子：新列）(
mainAxisAlignment:mainAxisAlignment.center，
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
新文本（“纽约”，样式：新文本样式（fontSize:20.0，颜色：Colors.white70，fontWeight:fontWeight.bold），
新尺寸盒子（高度：8.0，），
新文本（“Sunny”，样式：新文本样式（fontSize:12.0，颜色：Colors.white70），
新尺寸盒子（高度：10.0，），
新行（儿童：[
新栏目（儿童：[
新文本（'2342'，样式：新文本样式（fontSize:12.0，颜色：Colors.white）），
新文本（“流行度”，样式：新文本样式（fontSize:10.0，颜色：Colors.white）），
],),
新栏目（儿童：[
新文本（'2342'，样式：新文本样式（fontSize:12.0，颜色：Colors.white）），
新文本（'Like'，样式：新文本样式（fontSize:10.0，颜色：Colors.white）），
],),
新栏目（儿童：[
新文本（'2342'，样式：新文本样式（fontSize:12.0，颜色：Colors.white）），
新文本（“跟随”，样式：新文本样式（fontSize:10.0，颜色：Colors.white）），
],)
],)
],)),
新填充（填充：仅限新边集（左：10.0，右：10.0），
子：新列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
新文本（'12°，样式：新文本样式（fontSize:30.0，颜色：Colors.white70）），
新文本（'排名'，样式：新文本样式（fontSize:14.0，颜色：Colors.white70），），
],))
],),
);
}

---

看看这个例子（一个汉堡包图标和紫色剪裁背景上的三个红点）：

如果您希望这样做，代码将非常简短：

body: Column(
        children: <Widget>[
          ClipPath(
            clipper: MyClipper(),
            child: Container(
              height: 350,
              width: double.infinity,
              decoration: BoxDecoration(
                gradient: LinearGradient(colors: [
                  Color.fromRGBO(16, 27, 117, 0.5),
                  Color.fromRGBO(16, 27, 117, 0.5),
                ]),
                image: DecorationImage(
                  image: AssetImage(
                    "assets/images/points_removed.png",
                  ),
                ),
              ),
              child: Align(
                alignment: Alignment(-0.8, -0.6),
                child: Image.asset(
                  "assets/images/hamburger_icon.png",
                  width: 30,
                  height: 20,
                ),
              ),
            ),
          ),
        ],
      ),

body:Column(
儿童：[
克利帕斯(
clipper:MyClipper（），
子：容器(
身高：350，
宽度：double.infinity，
装饰：盒子装饰(
渐变：线性渐变（颜色：[
颜色。来自RGBO（16,27,117,0.5），
颜色。来自RGBO（16,27,117,0.5），
]),
图像：装饰图像(
图片：资产评估(
“资产/图像/点数已删除.png”，
),
),
),
子对象：对齐(
对齐：对齐（-0.8，-0.6），
子：Image.asset(
“资产/图像/汉堡图标.png”，
宽度：30，
身高：20，
),
),
),
),
],
),

（可选）用于剪裁背景的代码

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height - 80);
    path.quadraticBezierTo(
        size.width / 2, size.height, size.width, size.height - 80);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

类MyClipper扩展了CustomClipper{
@凌驾
路径getClip（大小）{
var path=path（）；
path.lineTo（0，size.height-80）；
path.quadraticBezierTo(
尺寸.宽度/2，尺寸.高度，尺寸.宽度，尺寸.高度-80）；
path.lineTo（size.width，0）；
path.close（）；
返回路径；
}
@凌驾
bool shouldReclip（CustomClipper oldClipper）{
返回false；
}
}

如果您提出问题并展示您的尝试（以文本形式）并分享结果，则此网站效果最佳。看见如果你想打开抽屉的话，仅仅问代码示例可能不会有多大的吸引力