小部件中的图像 [Flutter]

Question

我想在flutter中制作一张或几张卡片。图片放在右侧，文本信息放在左侧。我使用CircleAvatar进行测试时，它基本上已经实现了我的要求，但是我不想要圆形的图片，而是需要一个方形的图片。我删除了CircleAvatar部分并添加了新的容器和子元素，但是我不能使用AssetImage，我只能使用image.asset（'.jpg'）。由于没有有效的方法来设置大小，所以图片几乎比手机大，而使用CircleAvatar可以工作，因为我将半径设置为大小。 当我尝试使用AssetImage()时，vscode告诉我我不能将其放入小部件中。 我希望你能帮助我解决问题（我认为image.asset()不是正确的方法）。谢谢大家

    return new MaterialApp(      
  title: title,
  home: new Center(
    child: new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new Card(
          child: new Column(
            children: <Widget>[
              new Row(
                children: <Widget>[
                  new Container(
                    child:
                      new CircleAvatar(
                    backgroundImage: new AssetImage('images/lake.jpg'),
                    radius: 80.0,
                      child: new Container(
                        padding: const EdgeInsets.all(0.0),
                          child: new Text('Sight'),
                          ),
                      )
                  ),
                  ),
                  new Container(
                    child: new Text('long information text'),
                  )
                ],
              )
            ],
          ),
        )
      ],
    ),
  )  
);

} }

- Retch

---

最小化、完整化和可验证的示例。 - Morse

Answer 1

您应该可以针对您的行执行此操作：

 Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sample App',
      home: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Card(
              child: new Column(
                children: <Widget>[
                  new Row(
                    children: <Widget>[
                      new Container(
                        child: new Image.asset(
                          'images/lake.jpg',
                          height: 60.0,
                          fit: BoxFit.cover,
                        ),
                      ),
                      new Container(
                        child: new Text('long information text'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

- John Wiese

---

非常感谢，这解决了我的问题。你知道如何使图像的角变圆吗？我尝试使用border-radius，但没有任何变化。在这里你可以看到它：https://pastebin.com/g8Bu2jXD - Retch

Answer 2

针对您的评论，我们提供以下答案：

您可以使用ClipRRect实现。

new ClipRRect(
    borderRadius: new BorderRadius.circular(8.0),
    child: new AssetImage('images/lake.jpg')
)

你也可以这样做：

new Container(
        width: 50.0,
        height: 50.0,
        decoration: new BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
          fit: BoxFit.fill,
          image: new AssetImage('images/lake.jpg')
          )
       )),

- vij

---

我找到了一个名为flutter_svg的独立SVG包，它对我来说运行得很好 :) - vij

ClippedRRect似乎期望一个Widget作为子元素，因此AssetImage引起了错误。 - app_sciences