Question

所以问题是我可以分别在UI中完成所有工作，但不能放置读取高度和重量以及两个容器的接合点的框。我使用Stack进行了尝试，但是堆栈的布局区域根据其子控件中最大的窗口小部件而改变。因此，我尝试制作一个空的容器，然后在其顶部添加一个深蓝色的容器，然后尝试将其他两个容器放置在绿色和白色容器的交界处，但是它不起作用。它指出堆栈的长度是无限的，因此无法构建。我已经尝试了一切堆栈，进行转换。

因此，我需要帮助设计这些盒子并将其放在那里。而且我希望它适用于Evey设备，而不管其大小如何，也就是说，使这个完整的UI成为Scrollable还是大家都建议的那样，正如我刚接触这个世界 Here's the image

Answer 1

您可以这样进行工作：突出复制并粘贴并了解堆栈小部件。

class A extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;
    return Scaffold(

      backgroundColor: Colors.grey[50],
      body: Stack(
        fit: StackFit.loose,
        children: [

        Container(
          color: Colors.green,
          height: height*.3,
          width: width,

          child: Text("Content"),
        ),
          Padding(
            padding:  EdgeInsets.only(top: height*.25),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [

                Card(
                  child: Container(
                    color: Colors.red,
                    height: 100,
                    width: width*.3,
                  )

                  ,
                ),
                Card(
                  child: Container(height: 100,
                    width: width*.3,
                  )

                  ,
                ),


              ],),
          ),






      ],),

    );
  }
}

Answer 2

您必须在此布局中使用堆栈

或者您必须选择自定义画家来绘制圆

我无法设计以下用户界面

2 个答案: