主页 / coding / 问题 / 79599834
Accepted
Mou Biswas
Asked: 2025-04-30 16:07:57 +0800 CST

如何将一个容器放置在另一个容器上 - Flutter

  • 772

我正在尝试为登录页面做这个特殊的设计。

用户界面

但我得到的结果如下：

在此处输入图片描述

我尝试的代码是：

               Stack(
                      fit: StackFit.passthrough,
                      children: [
                        Container(height: 2, color: Colors.grey),
                        Positioned(
                          child: Center(
                            child: Transform.rotate(
                              alignment: Alignment.center,
                              angle: 45,
                              child: Container(
                                height: 18,
                                width: 18,
                                color: colorController.primaryColor.value,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
flutter

2 个回答

  1. Best Answer

    线形小部件（带有颜色的容器）的大小为 2，这会导致结果与您想要的不匹配

    修复它

     Stack(
   fit: StackFit.passthrough,
   children: [
     const SizedBox(
       height: 18,
       child: Divider(
         color: Colors.grey,
         height: 2,
         thickness: 2,
       ),
     ),
     Positioned(
       child: Center(
         child: Transform.rotate(
           alignment: Alignment.center,
           angle: 40,
           child: Container(
             height: 18,
             width: 18,
             color: Colors.blue,
           ),
         ),
       ),
     )
   ],
 ),
    • 0

  2. 这也可能是一个可能的答案：

     Padding(
                        padding: const EdgeInsets.only(right: 28, left: 28),
                        child: Center(
                          child: Stack(
                            alignment: Alignment.center,
                            clipBehavior: Clip.none,
                            children: [
                              Container(
                                height: 2,
                                width: 300,
                                color: Colors.grey,
                              ),
                              Positioned(
                                top: -8,
                                child: Transform.rotate(
                                  angle: pi / 4,
                                  child: Container(
                                    height: 18,
                                    width: 18,
                                    color: primaryColor,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
    • 0

相关问题