形状对于颤动中的圆形特性无法正常工作

时间:2019-03-05 10:06:24

标签: user-interface flutter

我正在尝试制作一个圆形图像框,但是在使用shape: Boxshape.circle之后,它可以在当前图像上正常工作。我确定shape属性不取决于图像像素或任何其他事物。

我有此代码:

return Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Container(
        margin: EdgeInsets.only(right: 40.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              height: 144.0,
              width: 144.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                  fit: BoxFit.fill,
                  image: AssetImage('MY_IMAGE')
                )
              )
            )
          ]
        )
      )
    ],
);

我已经从以下链接中了解了BoxdecorationFlutter - BoxDecoration。我有信心shape应该可以工作,但就我而言,它不能工作。

这是我现在得到的结果:

Resultant Image

我需要您身边的朋友的帮助。先谢谢了。

4 个答案:

答案 0 :(得分:0)

fetchrequest func FetchCountInvoices() { let request = NSFetchRequest<Invoice>(entityName: "Client") let clientSort = NSSortDescriptor(key: "name", ascending: true) request.sortDescriptors = [clientSort] request.predicate = NSPredicate (format: "clientInvoice = %@ && year = %@ ", clients!, currentyear) do { let results = try context.count(for: request) for number in 0..<(results) { cInvoices.append(results) } self.tableView.reloadData() } catch{ let nserror = error as NSError fatalError("Unresolved error \(nserror), \(nserror.userInfo)") } } 内使用ClipRRect

SizedBox

答案 1 :(得分:0)

尝试此代码

Container(
          color: Colors.amber,// this is just for detection, rounded or not
          child: Center(
            child: new Container(
                height: 144.0,
                width: 144.0,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(72),
                    image: DecorationImage(
                        fit: BoxFit.fill,
                        image: AssetImage('assets/img1.png')))),
          ),
        )

答案 2 :(得分:0)

使用您在问题中发布的相同代码。但是,请尝试使用BoxFit.contain而不是BoxFit.fillBoxFit.cover

Mazin Ibrahim 在上面的回答中的评论中提到,图像的实际高度必须小于圆形容器的半径,因此即使容器在形状,您看不到它。

检查this link了解更多详细信息。

答案 3 :(得分:0)

对我来说,它可以在子级中使用ClipOval并通过Transform.scale来增加图像大小

                 Container(
                    decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(40))),
                    child: ClipOval(
                      child: Transform.scale(
                        scale: 1.6,
                        child: Image.asset(
                          "my asset image",
                          width: 80,
                          height: 80,
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  )