flutter 文本不随系统设置而改变大小[最全的整理]

文本不随系统设置而改变大小[三]

  • 前言
      • 方案十三：使用Flexible
      • 方案十四：使用MediaQueryData的textScaleFactor属性
      • 方案十五：使用FractionallySizedBox
      • 方案十六：使用自定义文本样式
      • 方案十七：使用自定义绘制（CustomPainter）
      • 方案十八：使用RichText和TextSpan结合MediaQuery
  • 总结

前言

在flutter 越来越来的平台适配中，最常见的一直场景就是，修改了设备的字体大小或者样式，从而导致整个APP 的适配变形等情况的出现，对于这种问题的解决方案，当然就是限制字体了，但是如果一概而论的话，又不太适合，毕竟产品可不管你方不方便的，这里我整理了绝大部分的场景使用方案请添加图片描述

方案十三：使用Flexible

通过使用Flexible小部件，你可以将文本放置在Flexible容器中，以确保文本不随系统字体大小变化而缩放。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Flexible(
              child: Text(
                'This text will not scale with system font size',
                style: TextStyle(
                  fontSize: 16.0, // 设置一个基础的字体大小
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们将文本包装在Flexible小部件中，这样它就可以根据屏幕大小自动调整大小。通过这种方式，文本不会随系统字体大小变化而缩放。

方案十四：使用MediaQueryData的textScaleFactor属性

通过直接使用MediaQueryData的textScaleFactor属性，你可以动态调整文本的大小，以确保其不受系统字体大小变化的影响。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double textScaleFactor = MediaQuery.of(context).textScaleFactor;

    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: Text(
          'This text will not scale with system font size',
          style: TextStyle(
            fontSize: 16.0 / textScaleFactor, // 根据textScaleFactor调整文本大小
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们直接使用MediaQuery获取了textScaleFactor，并将其应用于文本样式中。这样，文本将动态调整大小，以确保不受系统字体大小变化的影响。

这些方案提供了多样的选择，你可以根据应用的具体需求选择最合适的方式，或者根据情况结合使用不同的方案。希望这些方案对你有帮助，如果有其他问题或需要更多帮助，请随时提问。

方案十五：使用FractionallySizedBox

FractionallySizedBox可以根据父容器的百分比来设置子部件的大小。通过结合使用FractionallySizedBox和Text，你可以根据需要设置文本的大小，并确保不受系统字体大小的影响。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: FractionallySizedBox(
          widthFactor: 0.8, // 根据需要调整百分比
          child: Text(
            'This text will not scale with system font size',
            style: TextStyle(
              fontSize: 16.0, // 设置一个基础的字体大小
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，FractionallySizedBox的widthFactor属性设置为0.8，你可以根据需要调整这个百分比。这样，文本的大小将相对于父容器的大小，而不受系统字体大小的影响。

方案十六：使用自定义文本样式

通过自定义文本样式，你可以直接设置字体大小，确保文本不受系统字体大小的影响。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: Text(
          'This text will not scale with system font size',
          style: TextStyle(
            fontSize: 16.0, // 设置一个基础的字体大小
          ),
        ),
      ),
    );
  }
}

在这个例子中，直接在TextStyle中设置了字体大小，确保文本的大小不受系统字体大小变化的影响。

方案十七：使用自定义绘制（CustomPainter）

通过自定义绘制文本，你可以完全控制文本的大小，而不受系统字体大小变化的影响。这可以通过使用CustomPainter实现。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: CustomPaint(
          painter: NonScalingTextPainter(),
        ),
      ),
    );
  }
}

class NonScalingTextPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final text = 'This text will not scale with system font size';
    final textStyle = TextStyle(
      fontSize: 16.0, // 设置一个基础的字体大小
    );

    final textSpan = TextSpan(
      text: text,
      style: textStyle,
    );

    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    );

    textPainter.layout(minWidth: 0, maxWidth: size.width);

    textPainter.paint(canvas, Offset(0, (size.height - textPainter.height) / 2));
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

在这个例子中，我们创建了一个NonScalingTextPainter类，实现了CustomPainter接口。在paint方法中，我们手动创建了TextPainter，并使用TextSpan和TextStyle定义文本样式。通过手动控制文本的大小和位置，我们确保了文本不受系统字体大小变化的影响。

方案十八：使用RichText和TextSpan结合MediaQuery

结合使用RichText和TextSpan，并使用MediaQuery来获取文本比例因子，可以根据需求手动调整文本的大小。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double textScaleFactor = MediaQuery.of(context).textScaleFactor;

    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: RichText(
          text: TextSpan(
            text: 'This text will not scale with system font size',
            style: TextStyle(
              fontSize: 16.0 / textScaleFactor, // 根据textScaleFactor调整文本大小
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们使用RichText和TextSpan来创建文本，并根据MediaQuery获取的文本比例因子手动调整文本的大小，以确保文本不受系统字体大小变化的影响。

总结

这些方案提供了多样的选择，可以根据应用的具体需求选择最合适的方式，或者根据情况结合使用不同的方案。希望这些方案对你有帮助，如果有其他问题或需要更多帮助，请随时提问。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/196077.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

直播场景视频和特效解决方案

直播场景视频和特效解决方案

直播已经成为企业与消费者互动的重要方式，如何提供优质的直播内容，提升直播效果，以及实现直播内容的商业化转化，一直是企业面临的重要挑战。为此，美摄科技提供了一套全面的直播场景解决方案，帮助企业解决这…
阅读更多...
业务流程图用什么软件绘制？

业务流程图用什么软件绘制？

在企业的日常工作中，对于业务流程的把控和优化显得非常重要。为了更好地理解和管理业务流程，业务流程图便应运而生。 业务流程图是企业管理的图形化工具，它描述了企业在生产和服务提供过程中，在各个环节中所涉及的各种操作、任务…
阅读更多...
NX二次开发UF_MTX3_rotate_about_axis 函数介绍

NX二次开发UF_MTX3_rotate_about_axis 函数介绍

文章作者：里海 来源网站：https://blog.csdn.net/WangPaiFeiXingYuan UF_MTX3_rotate_about_axis Defined in: uf_mtx.h void UF_MTX3_rotate_about_axis(const double rotation_axis [ 3 ] , double rotation_angle, double mtx [ 9 ] ) overview 概述…
阅读更多...
Kanna库代码示例

Kanna库代码示例

编写一个使用Kanna库的网络爬虫程序。以下是代码的详细解释： swift import Kanna // 创建一个对象 let proxy Proxy(host: ") // 创建一个Kanna对象 let kanna Kanna(proxy: proxy) // 创建一个请求对象 let request Request(url: "") // 使用…
阅读更多...
更快更稳的剃须伙伴，DOCO黑刃电动剃须刀体验

更快更稳的剃须伙伴，DOCO黑刃电动剃须刀体验

现在的电动剃须刀选择很多，我觉得三刀头的旋转式剃须刀很好用，比如我目前用的这款DOCO黑刃剃须刀，在剃须效率、舒适度和易用性等方面都表现不错，很适合日常使用。 这款剃须刀采用磁吸式刀头，这一设计非常方便清洁与更换…
阅读更多...
软件测试面试时问你的项目经验，你知道该怎么说吗？

软件测试面试时问你的项目经验，你知道该怎么说吗？

很简单，我来给你们一个公式 0 自我介绍，名字 学历 荣誉。 1 简述项目背景，你身处这个项目是做什么的。 不要太细，试着引导一下面试官让他提问。这样，请问您对此有什么疑问吗？ 2 简述 你在项目中的角色&…
阅读更多...
vue3中的Fragment、Teleport、Suspense新组件

vue3中的Fragment、Teleport、Suspense新组件

Fragment组件 在Vue2中: 组件必须有一个根标签 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中 好处: 减少标签层级, 减小内存占用 <template><div style"font-size: 14px;"><p> 组件可以没有根标签</p&g…
阅读更多...
C语言——输入 10 个数，分别统计其中正数、负数、零的个数

C语言——输入 10 个数，分别统计其中正数、负数、零的个数

#include <stdio.h> int main() {int numbers[10]; // 存储输入的10个数int positive_count 0; // 正数计数器int negative_count 0; // 负数计数器int zero_count 0; // 零计数器// 输入10个数printf("请输入10个数&#xff1a;\n");for (int i 0; i …
阅读更多...
【计算机网络笔记】ARP协议

【计算机网络笔记】ARP协议

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…
阅读更多...
神经网络可视化——基于torchviz绘制模型的计算图

神经网络可视化——基于torchviz绘制模型的计算图

神经网络可视化——基于torchviz绘制模型的计算图 第一步、安装 graphviz 和 torchviz 库 第二步、编写代码生成计算图 第三步、安装graphviz软件 在深入理解深度学习模型时&#xff0c;可视化网络结构是一个非常有用的手段。今天介绍如何使用 torchviz 和 graphviz 来生成网…
阅读更多...
淘宝平台商品详情平台订单接入说明

淘宝平台商品详情平台订单接入说明

一 文档说明 本文档面向对象为电商平台商品详情数据和订单进行管理的第三方开发者或自研商家 二 支持范围 目前API已经支持订单的接单、取消、退单处理等操作。如果您的订单管理需求现有API不能满足&#xff0c;可以联系我们提出API需求。 参数说明 通用参数说明 参数不要乱…
阅读更多...
Ubuntu 20.0 + mysql 8.0 用户和密码修改

Ubuntu 20.0 + mysql 8.0 用户和密码修改

第一步 下载&#xff08;简单,注意联网&#xff09;Ubuntu 终端输入以下两行命令 (1) 数据库的服务端及客户端数据库的开发软件包 sudo apt-get install mysql-server mysql-client (2) 数据库的开发软件包 sudo apt-get install libmysqlclient-dev 第二步 查看是否安装成功 …
阅读更多...
产品解读：GreatADM如何快速改造单实例为双主、MGR、读写分离架构？

产品解读：GreatADM如何快速改造单实例为双主、MGR、读写分离架构？

前言 单机GreatDB/GreatSQL/MySQL将架构调整为多副本复制的好处有哪些&#xff1f;为什么要调整&#xff1f; 性能优化&#xff1a;如果单个GreatDB服务器的处理能力达到瓶颈&#xff0c;可能需要通过主从复制、双主复制或MGR及其他高可用方案来提高整体性能。通过将读请求分发…
阅读更多...
Linux中的内存回收：Swap机制(图文并茂)

Linux中的内存回收：Swap机制(图文并茂)

1、Swap机制是什么 &#xff1a; Swap机制是一种利用磁盘空间来扩展内存的方法。当系统的物理内存不足时&#xff0c;可以把一些不常用的内存数据写入到磁盘上的Swap分区&#xff0c;从而释放出更多的内存给其他需要的进程。当这些内存数据再次被访问时&#xff0c;系统会把它们…
阅读更多...
什么是路由抖动？该如何控制

什么是路由抖动？该如何控制

路由器在实现不间断的网络通信和连接方面发挥着重要作用&#xff0c;具有所需功能的持续可用的路由器可确保其相关子网的良好性能&#xff0c;由于网络严重依赖路由器的性能&#xff0c;因此确保您的路由器不会遇到任何问题非常重要。路由器遇到的一个严重的网络问题是路由抖动…
阅读更多...
leetcode 283. 移动零

leetcode 283. 移动零

代码&#xff1a; class Solution {public void swap(int[] nums,int m,int n){int tmpnums[m];nums[m]nums[n];nums[n]tmp;}public void moveZeroes(int[] nums) {int cur0;int dest-1;int nnums.length;for(;cur<n;cur){if(nums[cur]!0){dest;swap(nums,cur,dest);}}} } …
阅读更多...
封装一些可能会用到的JS的Dom操作方法（非JS自带的方法）

封装一些可能会用到的JS的Dom操作方法（非JS自带的方法）

1. 父元素节点下的子元素节点逆序 HTMLElement.prototype.childRevers function () {var all_num this.childElementCount;if (all_num) {while(all_num--){this.appendChild(this.children[all_num]);}} } // 获取 ul 父节点对象 var oul document.getElementsByTagName(u…
阅读更多...
抖去推--短视频账号矩阵系统saas工具源码技术开发

抖去推--短视频账号矩阵系统saas工具源码技术开发

一、短视频矩阵系统搭建常见问题&#xff1f; 1、抖去推的短视频AI矩阵营销软件需要一定的技术水平吗&#xff1f; 答&#xff1a;不需要。产品简单易用&#xff0c;不需要具备专业的技术水平&#xff0c;即使是初学者&#xff0c;也能够轻松上手操作。 3、抖去推的短视频AI矩…
阅读更多...
Maya 2024(3D建模、动画和渲染软件)

Maya 2024(3D建模、动画和渲染软件)

Maya 2024是一款非常强大的3D建模、动画和渲染软件&#xff0c;它提供了许多新功能和改进&#xff0c;以帮助建模师、动画师和渲染师更加高效地进行创作。 在建模方面&#xff0c;Maya 2024引入了Symmetry&#xff08;对称&#xff09;功能&#xff0c;可以在网格两侧生成均匀…
阅读更多...
vue2+el-select实现分页加载更多功能

vue2+el-select实现分页加载更多功能

需求&#xff1a; 由于项目下拉框数据过多&#xff0c;一次性加载完&#xff0c;会有性能问题&#xff0c;于是希望可以增加分页加载更多功能。 实现效果&#xff1a; 如上图&#xff1a;点击“点击加载更多”按钮&#xff0c;实现分页加载下一页&#xff0c;直到最后一页&am…
阅读更多...
最新文章

Copyright @ 2022~2023