如何在Flutter中将图像放入另一个图像中

Question

https://istack.dev59.com/w5mLQ.webp

就像我们看到的大图中有一个小圆形图像。如何按照图片中的方式排列文本。

https://istack.dev59.com/w5mLQ.webp

- user10275101

---

如果您提出一个问题并展示您已经尝试过的内容（以文本形式），并分享结果，那么这个网站会发挥最佳作用。请参见[ask]。如果您只是要求代码示例，您可能不会得到太多帮助。 - user1531971

Answer 1

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),),
          ],))

      ],),
  );
}

- Zulfiqar

Answer 2

需要翻译的内容如下：

要实现您所需求的功能需要使用几个小部件，以下是我解决问题的方法（可能需要微调以适应您的确切需求，但应该能让您开始）：

首先从背景开始（我相信您称之为全貌）。要实现这一点，您可以使用 Container 小部件来绘制矩形，并使用设置 decoration 属性的 BoxDecoration 小部件来设置背景图片。

接下来，将 Container 小部件的 child 属性设置为包含循环图像的 Row 小部件和包含文本元素的 Column 小部件。

整个过程可能会看起来像这样：

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'),
                ],
            ),
        ],
    ),
)

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

- 容器小部件 - BoxDecoration小部件 - CircleAvatar小部件 - 列小部件 - 行小部件

请注意，我没有测试代码片段中列出的代码，因此可能需要进行一些微调。

- Maurits van Beusekom

Answer 3

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

如果您想要这个功能，代码会非常简短：

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,
                ),
              ),
            ),
          ),
        ],
      ),

（可选）裁剪背景的代码

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;
  }
}

- Gabriel Arghire

---

如果您想打开带有汉堡图标的抽屉，请查看这里或这里。 - Gabriel Arghire