容器內的影像不完全適合

我有一個里面有一行的容器。

Container(
                                      width: MediaQuery.of(context).size.width,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          //mbx
                                          Container(
                                              width: 40.0,
                                              height: 40.0,
                                              decoration: new BoxDecoration(
                                                  color: AppColors.grisMovMap,
                                                  shape: BoxShape.circle,
                                                  image: new DecorationImage(
                                                      fit: BoxFit.fill,
                                                      image: AssetImage(
                                                          'assets/sports/MBX.png')))),
                                          SizedBox(
                                            width: 5,
                                          ),
                                          //motocross
                                          Container(
                                              width: 40.0,
                                              height: 40.0,
                                              decoration: new BoxDecoration(
                                                  color: AppColors.grisMovMap,
                                                  shape: BoxShape.circle,
                                                  image: new DecorationImage(
                                                      fit: BoxFit.fill,
                                                      image: AssetImage(
                                                          'assets/sports/motocross.png')))),
                                        ],
                                      ),
                                    )

該行包含另外兩個容器，里面有一個圓形資產影像。

問題是兩個影像都沒有填充圓形空間，它們在邊框的某些部分被切割。

我想將兩個影像完全放在圓圈內，就像添加填充值一樣。

編輯：

在這里，您可以將兩個完整影像與應用程式輸出進行比較：

uj5u.com熱心網友回復：

CircleAvatar(
          radius: 100,
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Image.asset(
              "assets/images/w3lk3.png",
            ),
          ),
          backgroundColor: Colors.purple,
        ),

輸出：

uj5u.com熱心網友回復：

用于fit:BoxFit.contain將影像完全放入容器內。

uj5u.com熱心網友回復：

由于您使用的是圓形影像，我建議您使用官方檔案中的圓形影像的原生顫振解決方案。https://api.flutter.dev/flutter/material/CircleAvatar-class.html

在代碼方面：

CircleAvatar( backgroundImage: NetworkImage(userAvatarUrl), )

如果我理解正確，你想要圓圈周圍的某種顏色？

使用雙 CircleAvatar 小部件。這可能不是正確的方法，但它完成了任務。

          CircleAvatar(
            radius: 70,
            backgroundColor: Colors.red,
            child: CircleAvatar(
              backgroundImage: 
              AssetImage('assets/sports/motocross.png'),
              radius: 50,
            ),
          ),

由于它創建了兩個圓圈，因此只需確保第一個圓圈大于第二個圓圈并設定您選擇的顏色。

標籤：扑

上一篇：按順序取最后一個值

下一篇：顫振：如何使用型別或泛型來映射？