flutter实现根据widget大小自动调整文字size以最大尺寸显示

首先使用了flutter pub中的auto_size_text,不管设置max_font_size、min_font_size还是style,依然不符合想要的显示效果,所以自己实现了一下

先上实现效果
初始的widget大小
尺寸大小固定
此时更改文字内容不改变widget尺寸
文字内容增加自动根据当前尺寸大小以适应
文字大小不变,widget尺寸增大
当widget尺寸增大时自动增大文字size
尺寸变小
文字不变尺寸变小
实现逻辑:

  1. 首先测量当前显示text的尺寸大小,因为使用的自适应尺寸,所以实际测量的是父组件的大小,然后减去父组件中其他组件的大小得到当前text widget的最大尺寸
  2. 根据最大尺寸换算出最大的font size
  3. 根据文字内容和font size测量出对应的宽高
  4. 当宽度大于widget的最大宽度时(因为实际上有内边距,所以需要多减去一点)font size减小
  5. 继续测量text宽高当高度大于最大高度时(同有内边距)行数增加
  6. 行数增加后对应的test宽度应该减去一行
  7. 4、5、6循环直到不满足条件此时font size是满足widget尺寸的最大值(记得边缘检测)

代码由于没有整理就不贴了
等有空时上传pub
(大概率忘记或者没空或者懒得做)

更新: 仔细看了下发现auto_size_text使用上述步骤限制好尺寸后可以实现部分效果,即尺寸不变的情况下文字变小,但尺寸变化后无法重新适应

如果仅需要尺寸不变时自适应的文字大小使用auto_size_text即可

  • 6
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Flutter实现评论区 Widget,你可以创建一个自定义的 StatefulWidget,其中包含一个输入框和一个评论列表。用户可以在输入框中输入评论并提交,评论将被添加到评论列表中。以下是一个简单的示例代码: ```dart class CommentWidget extends StatefulWidget { @override _CommentWidgetState createState() => _CommentWidgetState(); } class _CommentWidgetState extends State<CommentWidget> { TextEditingController _controller = TextEditingController(); List<String> _comments = []; void _addComment() { setState(() { _comments.add(_controller.text); _controller.clear(); }); } @override Widget build(BuildContext context) { return Column( children: [ TextField( controller: _controller, decoration: InputDecoration( hintText: "写下你的评论", suffixIcon: IconButton( icon: Icon(Icons.send), onPressed: _addComment, ), ), onSubmitted: (String value) { _addComment(); }, ), Expanded( child: ListView.builder( itemCount: _comments.length, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text(_comments[index]), ); }, ), ), ], ); } } ``` 在这个示例代码中,我们首先创建了一个 CommentWidget StatefulWidget。在 StatefulWidget 的状态类 _CommentWidgetState 中,我们定义了一个 TextEditingController 和一个 List 来存储评论。在 build 方法中,我们创建了一个包含输入框和评论列表的 Column。在输入框中,我们使用 TextField 组件来接受用户的输入,并添加了一个 IconButton 来提交评论。在评论列表中,我们使用 ListView.builder 组件来渲染评论列表,并使用 ListTile 组件来显示每条评论的内容。 你可以将 CommentWidget 组件添加到你的 Flutter 页面中来展示评论区,并通过调用 setState 方法来更新评论列表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值