flutter - 具有垂直文本颤动的 HTML 插件

Question

我正在尝试用颤振的代码显示 HTML

通过使用 flutter_html: ^0.10.4

导入'包：flutter_html/flutter_html.dart'；

但是显示html时滚动显示黄色错误

代码

  body: Builder(
    builder: (BuildContext context) {
      return Container(
          child: Column(
        children: <Widget>[
          _buildHeader(context),
          loading
              ? Container(
                  color: Colors.white,
                  child: Column(
                    children: <Widget>[
                      Container(
                        decoration: const BoxDecoration(
                          border: Border(
                            bottom: BorderSide(
                                width: 1.0, color: Color(0xFFf3b433)),
                          ),
                        ),
                        child: Container(
                            padding: const EdgeInsets.symmetric(),
                            width: MediaQuery.of(context).size.width,
                            decoration: const BoxDecoration(
                              border: Border(
                                bottom: BorderSide(
                                    width: 1.0, color: Color(0xFFf3b433)),
                              ),
                              color: Color(0xFFFFFFFF),
                            ),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              textDirection: TextDirection.rtl,
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: [
                                InkWell(
                                  child: Container(
                                    width:
                                        MediaQuery.of(context).size.width /
                                            2.4,
                                    height:
                                        MediaQuery.of(context).size.height /
                                            25,
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.end,
                                      children: <Widget>[
                                        Container(
                                          child: Text(
                                            post.catname == null
                                                ? ''
                                                : post.catname,
                                            textAlign: TextAlign.left,
                                            style: TextStyle(
                                                fontSize: 16,
                                                color: Colors.black),
                                          ),
                                        ),
                                        Icon(Icons.arrow_left,
                                            color: Color(0xFFffab40))
                                      ],
                                    ),
                                  ),
                                  onTap: () {
                                    Menu itemSelected = Menu();
                                    itemSelected.setId = post.catid;
                                    itemSelected.setName = post.catname;
                                    itemSelected.setCategoryUrl =
                                        pageUrl.getCategoryUrl(
                                            int.parse(post.catid));
                                    Navigator.of(context).push(
                                        MaterialPageRoute(
                                            builder:
                                                (BuildContext context) =>
                                                    ThirdRoute(
                                                        itemSelected:
                                                            itemSelected)));
                                  },
                                )
                              ],
                            )),
                      ),
                      Container(
                        margin: EdgeInsets.symmetric(horizontal: 10),
                        child: Column(
                          children: <Widget>[
                            ListTile(
                              contentPadding:
                                  EdgeInsets.symmetric(vertical: 30),
                              title: Text(post.title,
                                  style: TextStyle(
                                      fontSize: MediaQuery.of(context)
                                              .size
                                              .width /
                                          24,
                                      color: Colors.red,
                                      fontWeight: FontWeight.bold),
                                  textDirection: TextDirection.ltr,
                                  textAlign: TextAlign.center),
                            ),
                            Container(
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  border: Border.all(
                                      color: Colors.deepOrange, width: 1)),
                              margin: EdgeInsets.only(
                                  left: MediaQuery.of(context).size.width /
                                      6),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Container(
                                    child: Row(
                                      children: <Widget>[
                                        Text(post.dateorder)
                                      ],
                                    ),
                                  ),
                                  Container(
                                    decoration: BoxDecoration(
                                        color: Colors.black,
                                        border: Border(
                                            left: BorderSide(
                                                color: Colors.deepOrange))),
                                    width:
                                        MediaQuery.of(context).size.width /
                                            3,
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: <Widget>[
                                        Text(post.since,
                                            style: TextStyle(
                                                color: Colors.white)),
                                        Icon(Icons.timer,
                                            color: Color(0xFFffab40))
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 25, bottom: 10),
                              child: Column(
                                children: <Widget>[
                                  Container(
                                    width:
                                        MediaQuery.of(context).size.width,
                                    height:
                                        MediaQuery.of(context).size.height /
                                            3.5,
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                          color: Colors.grey[600],
                                          width: 1),
                                      image: DecorationImage(
                                          image:
                                              NetworkImage(post.mainphoto)),
                                    ),
                                  )
                                ],
                              ),
                            ),
                            Container(
                              height:
                                  MediaQuery.of(context).size.height / 3.5,
                              width: MediaQuery.of(context).size.width,
                              child: Html(
                                data: post.text,
                                defaultTextStyle:
                                    TextStyle(fontFamily: 'serif'),
                                backgroundColor: Colors.white70,
                                padding: EdgeInsets.all(8.0),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                )
              : Container(
                  child: Center(
                    child: CircularProgressIndicator(),
                  ),
                ),
        ],
      ));
    },
  ),

我正在尝试使其成为 HTML 的全高内容并将其设置为具有行高的 rtl 样式。

HTML 将包含图像、文本和 YouTube 视频。

标签： flutter

Answer 1

像这样使用 ListView 而不是 Column ：

ListView(
  childern: <Widget>[
    //your widgets
  ],
);

或像这样用 SingleChildScrollView 包装您的列：

SingleChildScrollView(
  child: Column(
    childern: <Widget>[
      //your widgets
    ],
  ),
);