Question

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

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

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

Answer 1

将需要一些小部件来完成您想要实现的目标。这是我要解决的方式（可能需要进行一些微调才能满足您的确切需求，但应该可以开始使用）：

首先从背景开始（我相信您称之为全局）。为此，您可以使用Container小部件来绘制矩形，并使用decoration属性和BoxDecoration小部件来设置背景图像。

接下来，将child小部件的Container属性设置为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'),
                ],
            ),
        ],
    ),
)

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

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

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

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

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

如果您想拥有此代码，代码将非常简短：

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

如何将图像置于抖动图像中

3 个答案: