前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter 文本行距

Flutter 文本行距

作者头像
赵哥窟
发布2019-09-25 15:34:48
7.7K0
发布2019-09-25 15:34:48
举报
文章被收录于专栏:日常技术分享日常技术分享
代码语言:javascript
复制
import 'package:flutter/material.dart';

class TextLineHeightPage extends StatelessWidget{
  final double leading = 0.9;
  final double textLineHeight = 2; /// 文本间距
  final double fontSize = 16;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('文本行距'),
      ),
      body: Container(
        margin: EdgeInsets.all(20),
        ///利用 Transform 偏移将对应权重部分位置
        child: Transform.translate(
          offset: Offset(0, fontSize * leading / 2),
          child: Text(
            textContent,
            strutStyle: StrutStyle(forceStrutHeight: true, height: textLineHeight, leading: leading),
            style: TextStyle(
              fontSize: fontSize,
              color: Colors.black,
              //backgroundColor: Colors.greenAccent),
            ),
          ),
        ),
      ),
    );
  }
}

const textContent =
    "我是一个很帅的文本,我是一个很帅的文本,我是一个很帅的文本,我是一个很帅的文本,我是一个很帅的文本,我是一个很帅的文本"
    ",我是一个很帅的文本,我是一个很帅的文本,我是一个很帅的文本,我是一个很帅的文本,我是一个很帅的文本,";

Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-24 at 14.42.12.png

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.09.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档