时间戳

首页 > 解决方案 > 如何将flutter_markdown Widget垂直居中？

flutter - 如何将flutter_markdown Widget垂直居中？

问题描述

正如您在图片中看到的，有一个 Container-widget（灰色框），其中有一个来自flutter_markdown Package的 Markdown-widget 。

我希望 Markdown 元素在容器（黄色标记所在的位置）中垂直居中，而不是 Markdown 现在所在的位置（“Internet”）。

编辑： 如果唯一可能的解决方案是添加一个固定宽度，我需要以某种方式计算它，因为它可以只有一行或多行或没有换行符的长文本。如果没有任何换行符，flutter_markdown 小部件会自动将文本包装到小部件中。

它应该是什么样子

child: Container(
          constraints: BoxConstraints.expand(
            width: MediaQuery.of(context).size.width * 0.9,
            height: MediaQuery.of(context).size.width * 0.7,
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            color: _color
          ),
          padding: EdgeInsets.all(8.0),
          alignment: Alignment.center,
          child: Container(
            decoration: BoxDecoration(
            borderRadius: new BorderRadius.only(
              topLeft: new Radius.circular(20.0),
              bottomLeft: new Radius.circular(20.0),
            ),
            boxShadow: [
                new BoxShadow(
                  color: _color,
                  offset: new Offset(5.0, 5.0),
                  blurRadius: 20.0,
                )
              ],
            ),
            child: Scrollbar(
                child: Markdown(
                    imageDirectory: Store.storageDirectory,
                    data: _markdownText)),
          ),
        ),

提前致谢。

标签： flutterdartmarkdownflutter-layout

解决方案

Markdown 基于 ListView 并提供相同的属性。为我工作：

Center(child: Markdown(
          physics: BouncingScrollPhysics(),
          shrinkWrap: true,
          data: store.subtitle))

推荐阅读