如何在 ListView 小部件中使用降价包（对于带项目符号的文本）？在 ListView 中使用时没有任何显示

Question

这是我的代码。我想在 ListView 小部件中使用 MarkDown 小部件。但是当我什么都不用在页面上显示时。没有 ListView/Column 它工作正常。但是，我需要在 ListView 小部件中使用它。我想要像下图这样的东西。谢谢。

 class SettingsAccountDeleteMyAccount extends StatefulWidget {
  @override
  _SettingsAccountDeleteMyAccountState createState() => _SettingsAccountDeleteMyAccountState();
}

    class _SettingsAccountDeleteMyAccountState extends State<SettingsAccountDeleteMyAccount> {
  final testData = ["Flutter", "Dart", "Mobile Application", "Andriod Studio"];

    @override
  Widget build(BuildContext context) {
   final _markDownData = testData.map((x) => "- $x\n").reduce((x,
        y) => "$x$y");

    return Scaffold(
      appBar: AppBar(
        title: Text('Delete my account'),
      ),
    body: ListView(
        padding: EdgeInsets.only(top: 20.0, left: 15.0, right: 10.0, bottom: 10.0),
        children: <Widget>[
          ListTile(
            leading: Icon(
              Icons.error,
              color: Colors.red,
            ),
            title: Text(
              'Deleting your account will:',
              style: TextStyle(
                color: Colors.red,
                fontWeight: FontWeight.bold,
                letterSpacing: 0.3,
              ),
            ),
          ),
          Markdown(
            data: _markDownData,
          ),
        ],
      ),
    );
  }
}

Answer 1

您可以复制粘贴运行下面的完整代码
您可以用 Container 包装 Markdown 并提供 height 因为您使用 ListView
代码片段

Container(
            height: 200,
            child: Markdown(
              data: _markDownData,
            ),
          ),

工作演示

完整代码

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

class SettingsAccountDeleteMyAccount extends StatefulWidget {
  @override
  _SettingsAccountDeleteMyAccountState createState() =>
      _SettingsAccountDeleteMyAccountState();
}

class _SettingsAccountDeleteMyAccountState
    extends State<SettingsAccountDeleteMyAccount> {
  final testData = ["Flutter", "Dart", "Mobile Application", "Andriod Studio"];

  @override
  Widget build(BuildContext context) {
    final _markDownData =
        testData.map((x) => "- $x\n").reduce((x, y) => "$x$y");

    print(_markDownData);

    return Scaffold(
      appBar: AppBar(
        title: Text('Delete my account'),
      ),
      body: ListView(
        padding:
            EdgeInsets.only(top: 20.0, left: 15.0, right: 10.0, bottom: 10.0),
        children: <Widget>[
          ListTile(
            leading: Icon(
              Icons.error,
              color: Colors.red,
            ),
            title: Text(
              'Deleting your account will:',
              style: TextStyle(
                color: Colors.red,
                fontWeight: FontWeight.bold,
                letterSpacing: 0.3,
              ),
            ),
          ),
          Container(
            height: 200,
            child: Markdown(
              data: _markDownData,
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SettingsAccountDeleteMyAccount(),
    );
  }
}

Answer 2

用 MarkdownBody 小部件替换您的 Markdown 小部件。根据 flutter_markdown 文档：

If you do not want the padding or scrolling [this is the one you want to stop] behavior, use the MarkdownBody instead:

MarkdownBody(data: markdownSource);

如何在 ListView 小部件中使用降价包（对于带项目符号的文本）？在 ListView 中使用时没有任何显示

How can I use markdown package (For text with bullet point) inside the ListView Widget? Nothing show when use it inside ListView

flutter

flutter-dependencies

flutter-layout

flutter-packages

flutter-widget