flutter - 为什么即使具有相同的值，这个填充也是不同的？扑

Question

*代码输出

*代码输出

这是我的自定义小部件，它可以拍摄图像。

Widget customcategories({@required String image, @required String name}){
return Column(
                children: [
                  Container(
                    padding: EdgeInsets.all(2.0),
                    height: 70.0,
                    width: 70.0,
                    child: Image(
                      image: AssetImage(image),
                    ),
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 2.0,
                        color: Colors.black,
                      ),
                      borderRadius: BorderRadius.circular(7.0),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(10.0),
                    child: Text(name),
                  ),
                ],
              );
  }

在这里，我在所有小部件之间从 4.0 的右侧给出了相同的填充。第一个小部件获得左侧填充也不会触摸设备屏幕。在这里，输出中的 4 个小部件填充大于我给出的（4.0）（查看输出结果的图像）并且即使我删除填充它仍然更大。为什么会这样？以及如何解决？？给出下面的源代码：

Container( 
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [
                  Padding(padding: EdgeInsets.only(left: 5.0)),
                  customcategories(
                    image: "assets/images/plant1.png",
                    name: "All"
                  ),
                  Padding(padding: EdgeInsets.only(right: 4.0)),
                  customcategories(
                    image: "assets/images/plant2.png",
                    name: "Flower"
                  ),
                  Padding(padding: EdgeInsets.only(right: 4.0)),
                  customcategories(
                    image: "assets/images/plant3.png",
                    name: "Plant"
                  ),
                  Padding(padding: EdgeInsets.only(right: 4.0)),
                  customcategories(
                    image: "assets/images/plant4.png",
                    name: "Tree"
                  ),
                  Padding(padding: EdgeInsets.only(right: 4.0)),
                  customcategories(
                    image: "assets/images/plant1.png",
                    name: "Decoration"
                  ),
                  Padding(padding: EdgeInsets.only(right: 4.0)),
                  customcategories(
                    image: "assets/images/plant2.png",
                    name: "Bonsai"
                  ),
                  Padding(padding: EdgeInsets.only(right: 4.0)),
                  customcategories(
                    image: "assets/images/plant3.png",
                    name: "Medic"
                  ),
                  Padding(padding: EdgeInsets.only(right: 4.0)),
                  customcategories(
                    image: "assets/images/plant4.png",
                    name: "Fregerence"
                  ),
                  Padding(padding: EdgeInsets.only(right: 3.0)),
                ],
              ),
            ),
          ),

标签： flutter

Answer 1

为您的类别名称找到此问题，让我们试试

Widget customcategories({@required String image, @required String name}){
return Column(
                children: [
                  Container(
                    padding: EdgeInsets.all(2.0),
                    height: 70.0,
                    width: 70.0,
                    child: Image(
                      image: AssetImage(image),
                    ),
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 2.0,
                        color: Colors.black,
                      ),
                      borderRadius: BorderRadius.circular(7.0),
                    ),
                  ),
                  SizedBox(
                    width: 65
                    child: Text(name),
                  ),
                ],
              );
  }