它们是如何工作的？ ：堆栈小部件和位置小部件

Question

请您看看随附的屏幕截图并告诉我那条灰白色的带子是从哪里来的？ （红色箭头。） 我希望圆形容器将文本显示到屏幕底部——任何文本溢出都将简单地由 SingleChildScrollView 小部件滚动，但容器只会变得越来越薄，而灰色块只会留在那里？？

从 2018 年 3 月开始在 Flutter 工作，Flutter 的布局小部件仍然是个谜！

代码如下：

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      //       primary: false,
      appBar: AppBar(
        title: I10n.t('Playhouse'),
        centerTitle: true,
        automaticallyImplyLeading: false,
        elevation: 0,
        excludeHeaderSemantics: true,
      ),
      endDrawer: const ScrapBookDrawer(),
      body: SafeArea(
        child: Column(
          children: [
            /// Submodule Name |  Short Description
            Row(
              children: [
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 10, top: 4),
                    child: Text(
                      '${widget.subTask['subName']} |',
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
                const Expanded(
                  child: Padding(
                    padding: EdgeInsets.only(top: 4),
                    child: Text(
                      'Submodule description',
                    ),
                  ),
                ),
              ],
            ),
            Stack(
              alignment: AlignmentDirectional.topCenter,
              children: <Widget>[
                /// Large Picture
                Container(
                  height: 500, // double.infinity,
                  child: Crop(
                    interactive: false,
                    backgroundColor: Colors.white,
                    dimColor: Colors.white,
                    controller: CropController(),
                    child: Image.memory(
                      base64.decode(
                        con.submodule['image'],
                      ),
                    ),
                  ),
                ),
                Positioned(
                  left: 0,
                  right: 0,
                  top: 300,
                  /// Rounded Container
                  child: Container(
                    height: 500,
                    decoration: const BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(60),
                        topRight: Radius.circular(60),
                      ),
                      color: Colors.white,
                    ),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        /// Task Name and Number
                        Padding(
                          padding: const EdgeInsets.only(top: 30, bottom: 20),
                          child: Text(
                            widget.subTask['name'],
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                        /// Short Description or Title
                        Padding(
                          padding: const EdgeInsets.only(bottom: 20),
                          child: Text(widget.subTask['short_description']),
                        ),
                        /// Long Description
                        Flexible(
                          flex: 300,
                          child: SingleChildScrollView(
                            child: Text(widget.subTask['long_description']),
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }

Answer 1

我通过增加Stack 中第一个Container 的高度来消除白色区域。似乎它只是一个没有被任何东西覆盖的默认背景。