Question

我制作了一个水平列表视图，其中有CircleAvatar，就像Instagram故事在其应用中的放置方式一样，但我想在阴影周围添加阴影。
这是我的代码：

Container(
            height: 105.0,
            child: ListView.builder(
              padding: EdgeInsets.only(left: 10.0),
              scrollDirection: Axis.horizontal,
              itemCount: favorites.length,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Column(
                    children: <Widget>[
                      CircleAvatar(
                        radius: 30.0,
                        backgroundImage: AssetImage(favorites[index].imageUrl),

                      ),
                      SizedBox(height: 6.0),
                      Text(
                        favorites[index].name,
                        style: TextStyle(
                            color: Colors.grey,
                            fontSize: 14.0,
                            fontWeight: FontWeight.w400),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),

Answer 1

将化身包裹在容器中：

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    shape: BoxShape.circle,
    boxShadow: [BoxShadow(blurRadius: 10, color: Colors.black, spreadRadius: 5)],
  ),
  child: CircleAvatar(
    radius: 30.0,
    backgroundImage: AssetImage(favorites[index].imageUrl),
  ),
);

Answer 2

使用“材料”小部件将其包装并添加高程属性

Container(
  height: 105.0,
  child: ListView.builder(
    padding: EdgeInsets.only(left: 10.0),
    scrollDirection: Axis.horizontal,
    itemCount: favorites.length,
    itemBuilder: (BuildContext context, int index) {
      return Padding(
        padding: EdgeInsets.all(10.0),
        child: Column(
          children: <Widget>[
            Material(
                child: CircleAvatar(
                  radius: 30.0,
                  backgroundImage: AssetImage(favorites[index].imageUrl),
                ),
                elevation: ...),
            SizedBox(height: 6.0),
            Text(
              favorites[index].name,
              style: TextStyle(color: Colors.grey, fontSize: 14.0, fontWeight: FontWeight.w400),
            ),
          ],
        ),
      );
    },
  ),
),

Answer 3

结帐PhysicalModel

PhysicalModel(
       color: Colors.black,
       elevation: 15.0,
       shape: BoxShape.circle,
       child: CircleAvatar(         
             backgroundImage:NetworkImage(Constants.AVATAR_URL),
             radius: 50.0,
             backgroundColor: Colors.white,),)

Answer 4

使用材料

Material(
         borderRadius: BorderRadius.circular(20),
         elevation: 2,
         child: CircleAvatar(
         backgroundColor: Colors.red,
     ),
    ),

Answer 5

将其包裹在容器内，然后将 shape: BoxShape.circle 添加到 decoration: BoxDecoration()

Container(
   decoration: BoxDecoration(
     shape: BoxShape.circle
   ),
   child: CircleAvatar()
   
)

如何为CircleAvatar添加阴影？

5 个答案: