flutter 如何把两个图像在对方的顶部在一行?

ddrv8njm  于 2022-12-14  发布在  Flutter
关注(0)|答案(1)|浏览(128)

我是Flutter的新手,我想做点什么
what i did
我为第一个人做了一个相框,但是他们的头像不在一行。但是第二个和第三个人的头像在同一行。
我用定位的框架。但当我应用同样的其他,这是我得到的:
error
下面是我的代码:

child: Column(
         children: [
           Stack(
             children: [
               Padding(
                 padding: const EdgeInsets.only(bottom: 25.0),
                 child: CircleAvatar(
                   backgroundImage: NetworkImage(
                      "https://www.kindpng.com/picc/m/20-200312_anonymous-avatar-icon-hd-png-download.png"),
                   radius: 50,
                 ),
               ),
               new Positioned(
                   left: 0,
                   right: 0,
                   top: 0,
                   child:
                      new Image(image: AssetImage('Assets/111.png'))),
             ],
           ),
           SizedBox(
             height: 20,
           ),
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             children: [
               Column(
                 children: [
                   CircleAvatar(
                     backgroundImage: NetworkImage(
                        "https://www.kindpng.com/picc/m/20-200312_anonymous-avatar-icon-hd-png-download.png"),
                     radius: 50,
                   ),
                  new Positioned(
                   left: 0,
                   right: 0,
                   top: 0,
                   child:
                       new Image(image: AssetImage('Assets/111.png'))),
                 ],
               ),
              Column(
                children: [
                   CircleAvatar(
                     backgroundImage: NetworkImage(
                        "https://www.kindpng.com/picc/m/20-200312_anonymous-avatar-icon-hd-png-download.png"),
                    radius: 50,
                  ),
                 ],
              )
            ],
           )
         ],
       )

我想在那些个人资料照片上加一个相框,但是在一排中,我不能像第一张到第二张和第三张那样做。

gxwragnw

gxwragnw1#

您在Row中遇到此错误是因为您使用的是Column inside of Row而不是Stack。
下面是您可以参考的代码:

child: Column(
        children: [
          Stack(
            children: [
              Padding(
                padding: EdgeInsets.only(bottom: 25.0),
                child: CircleAvatar(
                  backgroundImage: NetworkImage(
                      "https://www.kindpng.com/picc/m/20-200312_anonymous-avatar-icon-hd-png-download.png"),
                  radius: 50,
                ),
              ),
              Positioned(
                left: 0,
                right: 0,
                top: 0,
                child: Image(
                  image: AssetImage('Assets/111.png'),
                ),
              ),
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Stack(
                children: [
                  const CircleAvatar(
                    backgroundImage: NetworkImage(
                        "https://www.kindpng.com/picc/m/20-200312_anonymous-avatar-icon-hd-png-download.png"),
                    radius: 50,
                  ),
                  Positioned(
                    left: 0,
                    right: 0,
                    top: 0,
                    child: Container(
                      height: 100,
                      width: 60,
                      color: Colors.amber,
                    ),
                  ),
                ],
              ),
              Stack(
                children: [
                  CircleAvatar(
                    backgroundImage: NetworkImage(
                        "https://www.kindpng.com/picc/m/20-200312_anonymous-avatar-icon-hd-png-download.png"),
                    radius: 50,
                  ),
                  Positioned(
                    left: 0,
                    right: 0,
                    top: 0,
                    child: Image(
                      image: AssetImage('Assets/111.png'),
                    ),
                  )
                ],
              )
            ],
          )
        ],
      )

Hope it will work now

相关问题