如何在 flutter 的 html 组件中添加滚动条

Question

现在我正在使用 html 组件在 flutter 中显示一些 html 内容，如下所示：

return GestureDetector(
      onHorizontalDragStart: _onHorizontalDragStart,
      onHorizontalDragUpdate: _onHorizontalDragUpdate,
      onHorizontalDragEnd: _onHorizontalDragEnd,
      child: Container(
        constraints: BoxConstraints(
          minHeight: MediaQuery.of(context).size.height * 0.9,
        ),
        color: Theme.of(context).scaffoldBackgroundColor,
        child: Padding(
          padding: const EdgeInsets.all(
            16.0,
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              InkWell(
                onTap: () => launchUrl(item.link),
                child: Padding(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Container(
                    child: Text(
                      item.title == "" ? "Comment" : item.title,
                      style: Theme.of(context).textTheme.headline5.copyWith(
                            fontWeight: FontWeight.w600,
                          ),
                    ),
                  ),
                ),
              ),
              if (item.domain != "")
                Padding(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: InkWell(
                      onTap: () async {
                        Channel channel = await Repo.fetchChannelItem(int.parse(item.subSourceId));
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => ChannelPage(item: channel)),
                        );
                      },
                      child: Text(
                        item.domain,
                        style: Theme.of(context).textTheme.caption.copyWith(color: Theme.of(context).primaryColor),
                      )),
                ),
              InkWell(
                onTap: () {},
                child: RichText(
                  text: TextSpan(
                    children: <TextSpan>[
                      TextSpan(
                        text: item.author,
                        style: Theme.of(context).textTheme.caption,
                      ),
                      TextSpan(
                        text: " ${String.fromCharCode(8226)} ",
                        style: Theme.of(context).textTheme.caption,
                      ),
                      TextSpan(
                        text: item.ago,
                        style: Theme.of(context).textTheme.caption,
                      ),
                    ],
                  ),
                ),
              ),
              if (item.content != "")
                Html(
                  data: item.content,
                  style: {
                    "body": Style(
                      fontSize: FontSize(19.0),
                    ),
                  },
                  onLinkTap: (url) => launchUrl(url),
                ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(right: 16.0),
                        child: Row(
                          children: [
                            if (item.isFav == 1)
                              IconButton(
                                icon: Icon(Icons.bookmark, color: Theme.of(context).primaryColor),
                                onPressed: () => touchFav("unfav", FavStatus.UNFAV),
                              ),
                            if (item.isFav != 1)
                              IconButton(
                                icon: Icon(Icons.bookmark),
                                onPressed: () => touchFav("fav", FavStatus.FAV),
                              ),
                            Padding(
                              padding: const EdgeInsets.only(left: 0.0),
                              child: Text(
                                "${item.favCount}",
                                textAlign: TextAlign.center,
                                style: Theme.of(context).textTheme.caption.copyWith(
                                      color: Theme.of(context).primaryColor,
                                    ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(bottom: 0.0),
                        child: Row(
                          children: [
                            if (item.isUpvote == 1)
                              IconButton(
                                icon: Icon(Icons.thumb_up, color: Theme.of(context).primaryColor),
                                onPressed: () => touchUpvote("unupvote", UpvoteStatus.UNUPVOTE),
                              ),
                            if (item.isUpvote != 1)
                              IconButton(
                                icon: Icon(Icons.thumb_up),
                                onPressed: () => touchUpvote("upvote", UpvoteStatus.UPVOTE),
                              ),
                            Padding(
                              padding: const EdgeInsets.only(left: 8.0),
                              child: Text(
                                "${item.upvoteCount}",
                                textAlign: TextAlign.center,
                                style: Theme.of(context).textTheme.caption.copyWith(
                                      color: Theme.of(context).primaryColor,
                                    ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  IconButton(
                    icon: Icon(
                      Feather.share_2,
                    ),
                    onPressed: () => handleShare(id: item.id, title: item.title, postUrl: item.link),
                  ),
                ],
              ),
            ],
          ),
        ),
      ))

当内容很长时，我想显示内容的进度，如何在 html 组件中添加滚动条以便知道阅读进度？

Answer 1

您是否将Html小部件封装在Scrollbar > SingleChildScrollView

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scrollbar(
        child: SingleChildScrollView(
          child: Html(
            data: """
<h1>Demo Page</h1>
<p>Selfish strong christianity ascetic fearful spirit deceptions justice mountains decrepit. Reason fearful depths chaos truth will justice reason battle pious marvelous zarathustra ocean deceptions. Free battle oneself right christian reason holiest god ocean society faithful free decieve inexpedient.</p>
<p>Oneself deceptions chaos derive merciful evil holiest. Spirit moral christianity mountains eternal-return decrepit of salvation philosophy decrepit. Depths reason madness ultimate burying law superiority strong noble. Enlightenment prejudice depths justice love overcome oneself truth disgust. Ascetic eternal-return love convictions ascetic disgust ubermensch against self faithful decrepit moral endless play. Against reason dead madness virtues truth enlightenment insofar moral pinnacle ubermensch intentions.</p>
<p>Depths dead faithful superiority morality joy abstract depths joy zarathustra eternal-return holiest war. Christianity eternal-return pinnacle snare enlightenment derive transvaluation good sea inexpedient reason pious evil ultimate. Enlightenment joy inexpedient hatred aversion deceptions marvelous inexpedient ultimate.</p>
""",
          ),
        ),
      ),
    );
  }
}

如果您希望Scrollbar始终可见，请设置isAlwaysShown: true 。 这将需要在Scrollbar和SingleChildScrollView上定义ScrollController ：

class MyHomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final _scrollController = useScrollController();
    return Scaffold(
      body: Scrollbar(
        controller: _scrollController,
        isAlwaysShown: true,
        child: SingleChildScrollView(
          controller: _scrollController,
          child: Html(
            data: """
<h1>Demo Page</h1>
<p>Selfish strong christianity ascetic fearful spirit deceptions justice mountains decrepit. Reason fearful depths chaos truth will justice reason battle pious marvelous zarathustra ocean deceptions. Free battle oneself right christian reason holiest god ocean society faithful free decieve inexpedient.</p>
<p>Oneself deceptions chaos derive merciful evil holiest. Spirit moral christianity mountains eternal-return decrepit of salvation philosophy decrepit. Depths reason madness ultimate burying law superiority strong noble. Enlightenment prejudice depths justice love overcome oneself truth disgust. Ascetic eternal-return love convictions ascetic disgust ubermensch against self faithful decrepit moral endless play. Against reason dead madness virtues truth enlightenment insofar moral pinnacle ubermensch intentions.</p>
<p>Depths dead faithful superiority morality joy abstract depths joy zarathustra eternal-return holiest war. Christianity eternal-return pinnacle snare enlightenment derive transvaluation good sea inexpedient reason pious evil ultimate. Enlightenment joy inexpedient hatred aversion deceptions marvelous inexpedient ultimate.</p>
""",
          ),
        ),
      ),
    );
  }
}