flutter html去掉上下边距,不占一行,宽度自适应

shrinkWrap: true:宽度是多大就是多大,跟随内容宽度
设置"html"和"body"就是为了去掉上下左右的边距

  String textData = """
<p > This <b>num</b> is some text</p>
""";

  Widget htmlText() {
    
    
    return Container(
      color: Colors.blue,
      child: Html(shrinkWrap: true, data: textData, style: {
    
    
        "html": Style(
            padding: EdgeInsets.all(0),
            margin: EdgeInsets.all(0),
            backgroundColor: Colors.grey,
            textAlign: TextAlign.center),
        "body": Style(padding: EdgeInsets.all(0), margin: EdgeInsets.all(0)),
        "p": Style(
            padding: EdgeInsets.all(0),
            margin: EdgeInsets.all(0),
            fontSize: FontSize.rem(1.02),
            color: const Color(0xFF373737),
            fontWeight: FontWeight.w400),
        "p > b": Style(
            padding: EdgeInsets.all(0),
            margin: EdgeInsets.all(0),
            fontSize: FontSize.rem(1.02),
            color: const Color(0xFF373737),
            fontWeight: FontWeight.w600)
      }),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import '../widget/marquee_view.dart';

class DirectText extends StatefulWidget {
    
    
  @override
  State<StatefulWidget> createState() => DirectTextState();
}

class DirectTextState extends State<DirectText> {
    
    
  @override
  void initState() {
    
    
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    
    
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('跑马灯'),
        ),
        //body占屏幕的大部分。
        body: _buildBody(),
      ),
    );
  }

  Widget _buildBody() {
    
    
    return Column(
      children: [
        Container(alignment: Alignment.centerLeft,child: htmlText()),
        Container(
            margin: const EdgeInsets.only(left: 15, top: 10, right: 15),
            padding: const EdgeInsets.only(left: 15, right: 15),
            height: 36,
            decoration: BoxDecoration(
              color: const Color(0xFFAAAAAA),
              borderRadius: BorderRadius.circular(15),
            ),
            child: Row(
              children: <Widget>[
                Container(
                  margin: const EdgeInsets.only(right: 10),
                  width: 15,
                  height: 15,
                  decoration: const BoxDecoration(
                    color: Colors.blue,
                  ),
                ),
                Expanded(
                  child: MarqueeView(
                    child: Row(
                      children: [
                        htmlText(),
                        htmlText(),
                        htmlText(),
                        htmlText(),
                        htmlText(),
                        htmlText(),
                      ],
                    ),
                  ),
                ),
              ],
            )),
      ],
    );
  }

  String textData = """
<p > This <b>num</b> is some text</p>
""";

  Widget htmlText() {
    
    
    return Container(
      color: Colors.blue,
      child: Html(shrinkWrap: true, data: textData, style: {
    
    
        "html": Style(
            padding: EdgeInsets.all(0),
            margin: EdgeInsets.all(0),
            backgroundColor: Colors.grey,
            textAlign: TextAlign.center),
        "body": Style(padding: EdgeInsets.all(0), margin: EdgeInsets.all(0)),
        "p": Style(
            padding: EdgeInsets.all(0),
            margin: EdgeInsets.all(0),
            fontSize: FontSize.rem(1.02),
            color: const Color(0xFF373737),
            fontWeight: FontWeight.w400),
        "p > b": Style(
            padding: EdgeInsets.all(0),
            margin: EdgeInsets.all(0),
            fontSize: FontSize.rem(1.02),
            color: const Color(0xFF373737),
            fontWeight: FontWeight.w600)
      }),
    );
  }
}


猜你喜欢

转载自blog.csdn.net/weixin_44911775/article/details/130520959