美文网首页
【第三天】flutter文本text与富文本RichText基本

【第三天】flutter文本text与富文本RichText基本

作者: 邓辉明 | 来源:发表于2020-12-18 02:23 被阅读0次

    这只是其中几种简单的方法,后续会补充,请持续关注

    这是完整dome代码,直接复制放入main.dart就可以了

    import 'package:flutter/gestures.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter/rendering.dart';
    import 'package:url_launcher/url_launcher.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        debugPaintSizeEnabled = true;
        return MaterialApp(
            theme: ThemeData(
              primarySwatch: Colors.red,
            ),
            home: Scaffold(
              appBar: AppBar(
                title: Text("text实例dome"),
              ),
              body: Center(
                child: Column(
                  //垂直居中
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    //普通文本
                    Text(
                      "我要做一个有追求,有抱负,有理想的人!希望我想买的东西,不需要为钱考虑",
                      maxLines: 1, //字体行数
                      overflow: TextOverflow.ellipsis, //超出行数截断或隐藏显示3个...
                      softWrap: true, //自动换行
                      //字体的样式
                      style: TextStyle(
                        fontSize: 30, //字体的大小
                        decoration: TextDecoration.lineThrough, //删除线
                        decorationStyle: TextDecorationStyle.wavy, //删除线样式),
                      ),
                    ),
                    SizedBox(
                      height: 10,
                    ),
    
                    //富文本
                    RichText(
                        text: TextSpan(
                            text: "做一个好人",
                            style: TextStyle(color: Colors.red, fontSize: 20),
                            children: [
                          TextSpan(text: "做一个有钱人"),
                          TextSpan(
                              text: "做一个万人仰慕的人",
                              style: TextStyle(color: Colors.blue),
                              //可以点击访问链接 的文本
                              recognizer: TapGestureRecognizer()
                                ..onTap = () async {
                                  String url = "http://baidu.com";
                                  if (await canLaunch(url)) {
                                    await launch(url);
                                  } else {
                                    throw "error: $url";
                                  }
                                })
                        ]))
                  ],
                ),
              ),
            ));
      }
    }
    
    class MemoryImageWidget extends StatefulWidget {
      @override
      _MemoryImageWidgetState createState() => _MemoryImageWidgetState();
    }
    
    class _MemoryImageWidgetState extends State<MemoryImageWidget> {
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Text("这是什么"),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:【第三天】flutter文本text与富文本RichText基本

          本文链接:https://www.haomeiwen.com/subject/yvjagktx.html