如何在 Flutter 的 Scaffold 主体中添加 MarkDown 和其他小部件？

Question

我正在尝试在 Scaffold 的主体中添加其他小部件以及 Flutter MarkDown 小部件。

但是无论我如何尝试，我都会遇到错误。

      appBar: new AppBar(
        title: new Text(
          widget.drawerItem.title,
        ),
      ),
      drawer: new NavigationDrawerDemo(),
      body: Markdown(data: Constants.someText),
    );

上面的代码运行良好。我想向页面添加其他小部件。但没有任何效果。

Answer 1

鉴于 Markdown 返回一个列表，我们必须设置

shrinkWrap

和

physics

。

SingleChildScrollView(
 child: Column(
   children: [
     Container(
       height: 100,
       color: Colors.red,
     ),
     Markdown(
       data: markDownTextHere,
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
     ),
   ],
 ),
);

Answer 2

似乎您需要使用布局小部件（如“列”）来垂直添加小部件和/或使用“行”来水平添加小部件，这里是一些示例代码：

import 'package:flutter/material.dart';
import 'package:hybrid/@core/constants/nav_bar_index.dart';
import 'package:hybrid/@core/ui-components/logo_container.dart';
import 'package:hybrid/@core/util/auth_util.dart';
import 'package:hybrid/@core/util/ui_util.dart';
import 'package:hybrid/screens/shared/app_bar.dart';
import 'package:hybrid/screens/shared/nav_bar.dart';
import 'package:hybrid/screens/signup/start.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var _isLoggedInResult;

  @override
  void initState() {
    super.initState();
    AuthUtil.isSignedIn().then((result) {
      setState(() {
        _isLoggedInResult = result;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoggedInResult == null) {
      return Container();
    }

    if (!_isLoggedInResult) {
      return Start();
    }

    return _buildScaffold();
  }

  Widget _buildScaffold() {
    return Scaffold(
      appBar: BmsAppBar(),
      body: _buildBody(),
      bottomNavigationBar: NavBar(index: NavBarIndex.Home),
    );
  }

  Widget _buildBody() {
    return Stack(
      children: <Widget>[
        Container(
          decoration: UIUtil.getDecorationBg(),
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            LogoContainer(),
             SizedBox(
              height: 20,
            ),
          ],
        ),
      ],
    );
  }
}

Answer 3

您可以使用

MarkdownBody

小部件呈现一个非滚动小部件，解析并显示 Markdown 并在任何滚动小部件中使用它来添加更多项目。

ListView(
  children: [
    // your widgets

    MarkdownBody(
      data: mdString,
    ),

    // your widgets
  ],
),