如何在 ListView Widget 中使用 markdown 包（对于带有项目符号的文本）？在 ListView 中使用时没有显示

Posted 2023-02-23

【中文标题】如何在 ListView Widget 中使用 markdown 包（对于带有项目符号的文本）？在 ListView 中使用时没有显示

【英文标题】：How can I use markdown package (For text with bullet point) inside the ListView Widget? Nothing show when use it inside ListView

【发布时间】：2020-07-06 09:46:24

【问题描述】：

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

 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,
          ),
        ],
      ),
    );
  
      

【参考方案1】：

您可以在下面复制粘贴运行完整代码 你可以用Container 包裹Markdown 并提供height，因为你使用ListView 代码sn-p

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(),
    );
  

【讨论】：

非常感谢春红汉。它在我的应用程序中正常工作。

很高兴为您提供帮助。如果对您有帮助，请将其标记为答案。谢谢。