Question

我仍然无法使用 Flutter 布局小部件的方法。我会删除或覆盖这个“空白”（见红色箭头）。我如何将“图像”扩展到菜单栏？

正如您在下面的代码中看到的，我使用的是 Stack 小部件。我不知道是什么在 Stack 小部件和 appbar 之间产生了“空白”？可能是因为 Crop 小部件（第三方包）。我现在会研究一下，但还是决定发布这个问题。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: I10n.t('Playhouse'),
        centerTitle: true,
        automaticallyImplyLeading: false,
        elevation: 0,
        excludeHeaderSemantics: true,
      ),
      endDrawer: const ScrapBookDrawer(),
      body: Stack(
        children: <Widget>[
          Crop(
            interactive: false,
            backgroundColor: Colors.white,
            dimColor: Colors.white,
            controller: CropController(),
            child: Image.memory(
              base64.decode(
                con.submodule['image'],
              ),
            ),
          ),
          SafeArea(
            child: Column(
              children: <Widget>[
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Flexible(
                        child: Text(
                          widget.subTask['subName'],
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 16,
                          ),
                        ),
                      ),
                      const Flexible(
                        child: Text(
                          'Submodule description',
                        ),
                      ),
                    ]),
                const Spacer(),
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Colors.white),
                    child: Column(
                      children: <Widget>[
                        /// Task Name and Number
                        Padding(
                          padding: const EdgeInsets.only(
                            top: 30,
                            bottom: 20,
                          ),
                          child: Text(
                            widget.subTask['name'],
                            style: const TextStyle(
                              fontSize: 26,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),

                        /// Short Description or Title
                        Padding(
                          padding: const EdgeInsets.only(
                            top: 10,
                          ),
                          child: Text(widget.subTask['short_description']),
                        ),
                        const SizedBox(height: 30),
                        Flexible(
                          child: SingleChildScrollView(
                            physics: const BouncingScrollPhysics(),
                            child: Text(widget.subTask['long_description']),
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

Answer 1

看来这实际上是由于 Crop 小部件所致。它会自动确定图片的纵横比。您应该通过将 aspectRatio 参数添加到 CropController 来手动设置纵横比，如下所示：

Crop(
  interactive: false,
  backgroundColor: Colors.white,
  dimColor: Colors.white,
  controller: CropController(aspectRatio: 0.75),
  child: Image.memory(
    base64.decode(
      con.submodule['image'],
    ),
  ),
)

在您的情况下，似乎 ~0.75 的纵横比效果最好，请尝试找到您的最佳值。

由于某种未知原因，Flutter Stack Widget 有空白

1 个答案: