Question

我尝试过这些 1.装饰图片 2.图片 3. CircleAvatar

我使用了Stack，因为会有背景图片。但是我不明白为什么图像会像这样扩大。

我需要一个圆形图片作为个人资料图片。

如果我使用Column而不是ListView，则图像不会像这样展开...但是我需要一个ListView。

代码：-

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          ListView(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 80.0,
                  width: 80.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: new DecorationImage(
                      image: AssetImage(Assets.cool),
                      fit: BoxFit.cover,
                    ),
                    color: Colors.red,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 50.0,
                  width: 50.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                  ),
                  child: Image(
                    image: AssetImage(Assets.cool),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: CircleAvatar(
                  radius: 50.0,
                  backgroundImage: AssetImage(Assets.cool),
                ),
              )
            ],
          )
        ],
      ),
    );
  }

Answer 1

根据我的理解，您希望图像是圆形而不是椭圆形。您可以通过使用listview元素将项目包装在Row中来实现。

return Scaffold(
  body: Stack(
    children: <Widget>[
      ListView(
        children: <Widget>[
          // Wrap with a row
          Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 80.0,
                  width: 80.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: new DecorationImage(
                      image: AssetImage("a.jpg"),
                      fit: BoxFit.cover,
                    ),
                    color: Colors.red,
                  ),
                ),
              ),
              //...
            ],
          ),
        ],
      )
    ],
  ),
);

Answer 2

要获取圆形图像，只需将所有ListView小部件包装在Column小部件中，然后将Column放在ListView中。您将获得一个可滚动的列。

ListView(
    children: <Widget>[
      Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              height: 80.0,
              width: 80.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: new DecorationImage(
                  image: AssetImage(Assets.cool),
                  fit: BoxFit.cover,
                ),
                color: Colors.red,
              ),
            ),
          ),
          //.....
        ],
      )
    ],
  ),s

DecorationImage / Image作为孩子要离开容器？

2 个答案: