【问题标题】:Flutter - How to display markdown text in sliverFlutter - 如何在 sliver 中显示 markdown 文本
【发布时间】:2019-07-04 13:29:10
【问题描述】:

我正在尝试在 SliverList 中运行 Markdown 小部件(包:flutter_markdown 0.2.0),但我遇到了一些问题。

理想情况下,我想在 Sliver 内的 ExpandTile 小部件内执行 Markdown 小部件,但现在我只想解决 Sliver 的 Markdown 子级问题。

我发布的代码给我带来了问题:

  • 我正确地看到了降价文本,但应用程序被冻结(我无法滚动,我什么也做不了)。我在使用小部件 MarkdownBody 时有这种行为

  • 我在使用小部件 Markdown 时看到一条错误消息:

I/flutter (31761): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (31761): The following assertion was thrown during performResize():
I/flutter (31761): Vertical viewport was given unbounded height.
I/flutter (31761): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (31761): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (31761): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (31761): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (31761): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (31761): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (31761): the height of the viewport to the sum of the heights of its children.
I/flutter (31761):
...

这是我的示例的完整代码:


import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';

const String _markdownData = """# Markdown Example
Markdown allows you to easily include formatted text, images, and even formatted Dart code in your app.

## Styling
Style text as _italic_, __bold__, or `inline code`.

- Use bulleted lists
- To better clarify
- Your points

## Links
You can use [hyperlinks](hyperlink) in markdown

## Images

You can include images:

![Flutter logo](https://flutter.io/images/flutter-mark-square-100.png#100x100)

## Markdown widget

This is an example of how to create your own Markdown widget:

    new Markdown(data: 'Hello _world_!');

## Code blocks
Formatted Dart code looks really pretty too:

void main() {
  runApp(new MaterialApp(
    home: new Scaffold(
      body: new Markdown(data: markdownData)
    )
  ));
}

Enjoy!
""";

void main() {
  runApp(MaterialApp(
      title: "Markdown Demo",
      home: Scaffold(
          appBar: AppBar(title: const Text('Markdown Demo')),
          body: Container(
              child: CustomScrollView(slivers: <Widget>[
            SliverList(
              delegate:
                  SliverChildListDelegate([Markdown(data: _markdownData)]),
            )
          ])))));
}

编辑:我解决了问题

问题出在这行代码中:

![Flutter logo](https://flutter.io/images/flutter-mark-square-100.png#100x100)

图像不存在,这会冻结应用程序。

【问题讨论】:

    标签: flutter markdown flutter-sliver


    【解决方案1】:

    使用 SliverToBoxAdapter 代替 SliverList

    【讨论】:

    • 仅当我在 Container 小部件中设置 height 属性时才有效:void main() { Widget _buildSliverToBoxAdapter(){ return SliverToBoxAdapter( child: Container( height: 400.0, child: Markdown(data: _markdownData) ), ); } runApp(MaterialApp( title: "Markdown Demo", home: Scaffold( body: CustomScrollView( slivers: &lt;Widget&gt;[ _buildSliverToBoxAdapter(), ])))); } 这是一个问题,因为 markdown 文本的长度是动态的。
    • 在 SliverFillRemaining 中尝试 SliverToBoxAdapter
    猜你喜欢
    • 2019-11-15
    • 2021-11-26
    • 2017-05-27
    • 1970-01-01
    • 2020-11-11
    • 2018-12-10
    • 2020-10-14
    • 2021-04-25
    • 1970-01-01
    相关资源
    最近更新 更多