脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → flutter text组件使用

flutter text组件使用示例详解

 更新时间：2022年12月01日 08:47:38   作者：前端那些年  
这篇文章主要为大家介绍了flutter text组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

flutter组件的实现参考了react的设计理念，界面上所有的内容都是由组件构成，同时也有状态组件和无状态组件之分，这里简单介绍最基本的组件。

在组件代码的书写方式上，web端开发的样式主要有由css进行控制，而客户端开发根据使用的技术栈不同，写法也稍微有些不同：ReactNative的写法和web比较类似，但是ReactNative是使用StyleSheet.create()方法创建样式对象，以内联的方式进行书写。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const LotsOfStyles = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigBlue}>just bigBlue</Text>
        <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
        <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
      </View>
    );
};
const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
export default LotsOfStyles;

而flutter则将组件封装成一个个的对象，样式及事件以属性的方式在实例化时进行赋值。

Text( 'Hello, $_name! How are you?', 
    textAlign: TextAlign.center, 
    overflow: TextOverflow.ellipsis, 
    style: const TextStyle(fontWeight: FontWeight.bold),
    )

Text组件

用我们的小拇指头就可以想到，Text组件主要是用来展示一个文本字符串。这字符串根据布局容器的约束空间有可能占展示一行文本，也有可能展示多行文本。

Text组件的构造器有一个可选的style属性，如果我们省略掉这个属性，那么文本就会使用默认的样式。

如果我们指定了我们定制的style样式，这个样式的类对象是TextStyle。我们定制的style样式会被merge到最近的默认样式DefaultTextStyle上去。

默认样式类DefaultTextStyle有这么几个属性：

maxLine: 最大行数，这个属性是可选的。

overflow: 文本超出后的样式。 overflow 的可选值有这么几个：clip（剪切）、fade(隐藏)、ellipsis（省略）、visible(直接展示)。如果我们点开文档看一下，会发现它其实是个枚举类型Enum。

const TextOverflow = {
    clip,
    fade,
    ellipsis,
    visible
}

Text组件构造器上的主要属性

  • style： 文本样式。
  • textAlign: 文本对齐方式。
  • textDirection: 文本方向。
  • textHeightBehavior: 定义如何展示style中的height
  • selectionColor: 文本选中时的颜色。
  • overflow: 文本超出后的样式。
  • maxLine: 最大行数，这个属性是可选的。

再用小拇指想一想，对齐方式和文本方向不用说也是个枚举类型。而style则是一个TextStyle的类型,TextStyle可以定义字体的：

  • 粗细fontWeight
    const Text( 'No, we need bold strokes. ', 
        style: TextStyle(fontWeight: FontWeight.bold),
    )
  • 斜体FontStyle.italic
const Text( "Welcome to the present", 
    style: TextStyle(fontStyle: FontStyle.italic), 
)
  • 透明度和颜色
TextSpan( 
    text: "You don't have the votes.\n", 
    style: TextStyle(
        color: Colors.black.withOpacity(0.6)), 
    ),
  • 字体大小
Text( 
    "These are wise words, ", 
    style:DefaultTextStyle.of(context).style.apply(fontSizeFactor: 2.0), 
)
  • 行高
const Text( 
    'Ladies and gentlemen, ',
    style: TextStyle(height: 5, fontSize: 10),
   )

需要注意的是：行高会按照 fontSize * n的比例进行扩展。

然后我们还可以定义字体的下划线、描边、填充颜色、甚至渐变色。

  • 下划线
RichText( 
    text: const TextSpan( 
        text: "Don't tax the South ", 
        children: <TextSpan>[ 
        TextSpan( 
        text: 'cuz', 
        style: TextStyle( 
            color: Colors.black, 
            decoration: TextDecoration.underline,
            decorationColor: Colors.red,                    decorationStyle:TextDecorationStyle.wavy, 
            ),
         ), 
            TextSpan( 
            text: ' we got it made in the shade',             ), 
      ],
     ),
   )
  • 描边和填充颜色
Stack( 
    children: <Widget>[
    Text( 'Greetings, planet!',
        style: TextStyle( 
            fontSize: 40, 
            foreground: Paint()
            ..style = PaintingStyle.stroke
            ..strokeWidth = 6
            ..color = Colors.blue[700]!,
            ),
        ),
    Text( 'Greetings, planet!',
        style: TextStyle( 
            fontSize: 40, 
            color: Colors.grey[300],
            ),
           ),
          ],
        )
  • 颜色渐变
Text( 
    'Greetings, planet!', 
     style: TextStyle( 
         fontSize: 40, 
         foreground: Paint() 
         ..shader = ui.Gradient.linear( 
             const Offset(0, 20), 
             const Offset(150, 20),
             <Color>[ 
             Colors.red, 
             Colors.yellow,
             ],
            ) 
          ),
      )

整体上想要掌握Text组件的属性，需要仔细思考一下它大概需要哪些样式：选用哪种字体，设置什么颜色，需要多少行高，选用哪种对齐方式，是否需要描边和渐变，是否需要一种装饰样式（下划线，删除线）就可以掌握了。

而想要文本有可交互的效果，则需要用GestureDetector这个组件将它包裹起来，在GestureDetector组件上触发ontaps事件。

掌握了这些内容，就算是掌握了flutter的text组件。

以上就是flutter text组件使用示例详解的详细内容，更多关于flutter text组件使用的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Kotlin开发的一些实用小技巧总结

    Kotlin开发的一些实用小技巧总结

    Kotlin 是一个基于 JVM 的新编程语言,用 JetBrains 的话来说是「更现代化、更强大，所以下面这篇文章主要给大家总结介绍了关于Kotlin的一些开发实用小技巧，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-10-10
  • Android通过手势实现答题器翻页效果

    Android通过手势实现答题器翻页效果

    这篇文章主要为大家详细介绍了Android通过手势实现答题器翻页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • Android 为ListView添加分段标头的方法

    Android 为ListView添加分段标头的方法

    下面小编就为大家带来一篇Android 为ListView添加分段标头的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Android Fragment 基本了解(图文介绍)

    Android Fragment 基本了解(图文介绍)

    Android是在Android 3.0 (API level 11)开始引入Fragment的可以把Fragment想成Activity中的模块，这个模块有自己的布局，有自己的生命周期，单独处理自己的输入，在Activity运行的时候可以加载或者移除Fragment模块
    2013-01-01
  • Android自定义view实现半圆环效果

    Android自定义view实现半圆环效果

    这篇文章主要为大家详细介绍了Android自定义view实现半圆环效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Android app应用多语言切换功能实现

    Android app应用多语言切换功能实现

    这篇文章主要为大家详细介绍了Android app应用多语言切换功能实现代码，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Android RecyclerView实现点击条目删除

    Android RecyclerView实现点击条目删除

    这篇文章主要为大家详细介绍了Android RecyclerView实现点击条目删除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Flutter Http分块下载与断点续传的实现

    Flutter Http分块下载与断点续传的实现

    这篇文章主要介绍了Flutter Http分块下载与断点续传的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Android仿微信语音消息的录制和播放功能

    Android仿微信语音消息的录制和播放功能

    这篇文章主要介绍了Android仿微信语音消息的录制和播放功能,需要的朋友可以参考下
    2017-09-09
  • 实例讲解Android Fragment的两种使用方法

    实例讲解Android Fragment的两种使用方法

    今天小编就为大家分享一篇关于实例讲解Android Fragment的两种使用方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-03-03

最新评论