Question

我想将我的图片放在屏幕顶部中央的应用栏下方。我设法垂直移动它，但似乎无法水平移动它。

Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        width: 100,
                        height: 100,
                        margin: EdgeInsets.only(top: 30, bottom: 10),
                        padding: EdgeInsets.only(left: 100.0, top: 100.0, right: 100.0, bottom: 100.0),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          image: DecorationImage(
                            image: NetworkImage('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'),
                            fit: BoxFit.contain,
                          ),
                        ),
                      ),
                    ]
                ),

我已经尝试了所有方法（mainAxisAlignment、crossAxisAlignment、margin、padding）。它们似乎都不起作用。

以下是我目前拥有的屏幕。我需要将徽标带到顶部中心：

Answer 1

如果您想更好地控制图片的位置，请使用下面的代码。更改 Alignment(x, y) 的值以选择图像的确切位置。

x 控制 x 轴（垂直放置），该值必须介于 -1（顶部）和 1（底部）之间。同样的事情也适用于 y。它控制 y 轴，其值必须介于 -1（最左侧）和 1（最右侧）之间。

中心是Alignment (0, 0)。您可以使用 -1 和 1 之间的任何数字，例如 (-0.8, 0.3) 或 (1, -0.4)。

确保将图像放在一个容器中，以填充您想要使用的空间。在下面的例子中，容器宽度等于屏幕宽度，容器高度等于屏幕高度减去应用栏高度。

return Scaffold(
    appBar: AppBar(
      title: Text("demo"),
      centerTitle: true,
    ),
    body: Container(
      //the container width is equal to the screen width
      //and its height is equal to the screen height minus the app bar height
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height - kToolbarHeight,
      child: Align(
         //Alignment(-1, -1) place the image at the top & far left
         // you can change the value of x and y to any number between -1 and 1
        alignment: Alignment(-1, -1), 
        child: Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'),
              fit: BoxFit.fitWidth,
            ),
          ),
        ),
      ),
    ),
    );

Answer 2

您可以尝试对齐。试试这个

Align(
    alignment: Alignment.topCenter,
    child: Column(
      children: [
        Container(
          height: 100,
          width: 150,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                  'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png'),
              fit: BoxFit.fitWidth,
              
            ),
          ),
        ),
      ],
    ),
  ),

自定义容器颤振的位置

2 个答案: