如何将图像放在图像中颤动

Question

https://i.stack.imgur.com/w5mLQ.png

就像我们在大图片中看到的一个小圆形图像。以及如何安排文字如图所示

https://i.stack.imgur.com/w5mLQ.png

Answer 1

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

如果你想要这个，代码会很短：

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

Answer 2

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

      ],),
  );
}

Answer 3

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

首先从背景开始（我相信你称之为大图）。为此，您可以使用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'),
                ],
            ),
        ],
    ),
)

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

• Container小部件
• BoxDecoration小部件
• CircleAvatar 小部件
• Column 小部件
• Row小部件

请注意，我尚未测试 sn-p 中列出的代码，因此可能需要稍作调整。