代码之家 › 专栏 › 技术社区 › Daibaku

我怎样才能创建分割圆合并图像

flutter

Daibaku · 技术社区 · 7 年前

我想创建一个圆形合并图像形状像这样。例如,有teamA和teamB,teamA的徽标或图像位于圆圈的左侧,teamB位于右侧。

我试过这样,但两个图像的形状仍然是矩形像这样。

我该怎么做?

new Center(
    child: new Container(
      width: 120.0,
      height: 120.0,
      child: new Row(
        children: <Widget>[
          Image.network(
            'https://images.unsplash.com/photo-1535593063927-5c40dee9cb83?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3bfc6e7c6043924de9c4746bef6dc969&auto=format&fit=crop&w=500&q=60',
            width: 60.0,
            height: 120.0,
            fit: BoxFit.cover,
          ),
          Image.network(
            'https://images.unsplash.com/photo-1535603863228-ded98173a95d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=78dee486ac6c9bffda623b83a36ecb1f&auto=format&fit=crop&w=500&q=60',
            width: 60.0,
            height: 120.0,
            fit: BoxFit.cover,
          )
        ],
      ),
    ),
  ),

1 回复 | 直到 7 年前

diegoveloper 7 年前

实现这一点的方法有很多,其中之一是:

    new Center(
            child: new Container(
              height: 300.0,
              width: 300.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: new Border.all(color: Colors.blue, width: 4.0),
              ),
              child: new Stack(
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                              'https://images.unsplash.com/photo-1535593063927-5c40dee9cb83?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3bfc6e7c6043924de9c4746bef6dc969&auto=format&fit=crop&w=500&q=60',
                            ))),
                  ),
                  ClipRect(
                    child: Align(
                      alignment: Alignment.centerLeft,
                      widthFactor: 0.5,
                                      child: Container(
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: NetworkImage(
                                  'https://images.unsplash.com/photo-1535603863228-ded98173a95d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=78dee486ac6c9bffda623b83a36ecb1f&auto=format&fit=crop&w=500&q=60'),
                            )),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          )