Flutter基础（Text）

周可爱
118 阅读4分钟

Flutter目录结构介绍

文件夹作用
androiandroid平台相关代码
iosios平台相关代码
linuxlinux平台相关代码
macosmacos平台相关代码
webweb相关代码
windowswindows相关代码
libflutter相关代码，编写的代码就在此文件中
test用于存放测试代码
pubspec.yaml配置文件，一般存放一些第三方库的依赖
analysis_options.yaml分析dart语法文件，老项目升级成新项目有告警信息的话可以删掉此文件

Flutter入口文件、入口方法

每一个flutter项目的lib目录里面都有一个main.dart这个文件就是flutter的入口文件main.dart里面的

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

//可以简写
void main()=>runApp(MyApp());

其中的main方法是dart的入口方法，runApp方法是flutter的入口方法。
MyApp是自定义的一个组件。

flutter第一个Demo Center组件的使用

void main(){
    runApp(MaterialApp(
        home:scaffold(
            appBar: AppBar(title: const Text("你好Flutter！")),
            boby: const HomePage(),
        ),
    ));
}

class HomePage extends StatelessWidget{
    const HomePage({Key? key}) : super(key:key);
    
    @override
    Widget build(BuildContext context){
        return const Center(
            child: Text(
                "我是一个文本",
                textDirection: TextDirection.ltr,
                style: TextStyle(
                    fontSize: 40.0,
                    // color: Colors.yellow,
                    color: Color.fromRGBO(244, 233, 121, 0.5),
                ),
            ),
        );
    }
}

Flutter把内容单独抽离成一个人组件

在flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget两者的区别：
StatelessWidget 是无状态组件，状态不可改变的widget；
StatefulWidget 是有状态组件，持有的状态可能在随widget生命周期改变

MaterialApp
materialApp是一个方便的widget，他封装了应用程序实现Material Design所需要的一些Widget。一般作为顶层widget使用。主要属性：

属性说明
home主页
title标题
color颜色
theme主题
routes路由

Scaffold
Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。主要属性：

属性说明
appBar显示在界面顶部的一个AppBar
boby当前界面所显示的主要内容Widget
drawer抽屉菜单控件

Flutter中Text组件属性

Text，是一个很常用的Widget；主要用于显示样式文本，其中包含控制文本显示样式的属。
text构造方法源码：

const Text(
    this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  }) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
       textSpan = null,
       super(key: key);

  const Text.rich(
    this.textSpan, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  }) : assert(
         textSpan != null,
         'A non-null TextSpan must be provided to a Text.rich widget.',
       ),
       data = null,
       super(key: key);

属性解析：

data
要显示的字符串。

style样式TextStyle
TextStyle的构造函数：

const TextStyle({
    this.inherit = true,
    this.color,
    this.backgroundColor,
    this.fontSize,
    this.fontWeight,
    this.fontStyle,
    this.letterSpacing,
    this.wordSpacing,
    this.textBaseline,
    this.height,
    this.locale,
    this.foreground,
    this.background,
    this.shadows,
    this.fontFeatures,
    this.decoration,
    this.decorationColor,
    this.decorationStyle,
    this.decorationThickness,
    this.debugLabel,
    String fontFamily,
    List<String> fontFamilyFallback,
    String package,
  }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
       _fontFamilyFallback = fontFamilyFallback,
       _package = package,
       assert(inherit != null),
       assert(color == null || foreground == null, _kColorForegroundWarning),
       assert(backgroundColor == null || background == null, _kColorBackgroundWarning);
属性说明
inherit是否将null值替换为祖先文本样式中的值（例如，在TextSpan树中）。如果为false，则没有显示值的属性将恢复为默认值：白色，字体大小为10像素，采用无衬线字体。
color字体颜色，如自定义颜色Color.fromRGBO(155,155,155,1)也可以使用Colors类里面自带的属性
backgroundColor文本的背景颜色
fontSize字体大小，默认为14像素
fontWeight字体宽度，可以使文本变粗或变细①FontWeight.bold 常用的字体重量比正常重，即w700；②FontWeight.normal 默认字体粗细，即w400；③FontWeight.w100 薄，最薄；④FontWeight.w200较轻；⑤FontWeight.w300轻；⑥FontWeight.w400正常/普通/平原；⑦FontWeight.w500较粗；⑧FontWeight.w600半粗体；⑨FontWeight.w700加粗；⑩FontWeight.w800 特粗；FontWeight.w900 最粗
fontStyle字体变体 FontStyle.italic 使用斜体；FontStyle.normal 使用直立
letterSpacing水平字母之间的空间间隔（逻辑像素为单位）。可以使用负值来让字母更接近。
wordSpacing单词之间添加的空间间隔（逻辑像素为单位）。可以使用负值来让单词更接近。
textBaseline对齐文本水平线：①TextBaseline.alphabetic：文本基线是标准的字母基线；②TextBaseline.ideographic：文本基线是表意字基线；③如果字符本身超出alphabetic基线，那么ideographic基线位置在字符本身的底部。
height文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2）
locale文本的前景色，不能与color共同设置（比文本颜色color区别在于paint功能多）
background文本的背景色
foreground文本的前景色，不能与color共同设置
shadows文本的阴影可以利用列表叠加处理，例如shadows:[Shadows(color.Colors.red,offset:Offset(6,3),blurRadius:10)],color即阴影的颜色，offset即阴影相对文本的偏移坐标，blurRadius即阴影的模糊程度，越小越清晰
decoration文字的线性装饰，比如TextDecoration.underline 下划线；TextDecoration.lineThrough 删除线
decorationColor文本装饰线的颜色
decorationStyle文本装饰线的样式，如TextDecoration.dashed虚线

textAlign
文本应如何水平对齐：

可选值说明
TextAlign.center将文本居中对齐
TextAlign.end对齐容器后缘上的文本
TextAlign.start对齐容器前缘上的文本
TextAlign.justify拉伸以结束的文本行以填充容器的宽度，即使用了decorationStyle才起效
TextAlign.left对齐容器左边缘的文本
TextAlign.right对齐容器右边缘的文本

textDirection
相对TextAlign的start、end而言有用

可选值说明
TextDirection.ltr从左至右
TextDirection.rtl从右至左

softWarp
是否自动换行（true自动换行，false单行显示，超出屏幕部分默认截断处理）

overflow
文字超出屏幕之后的处理方式

可选值说明
TextOverFlow.clip剪切溢出文字以修复其容器
TextOverFlow.ellipsis将溢出文字使用省略号表示
TextOverFlow.fade将溢出文字淡化为透明

其他

属性说明
textScaleFactor文字显示倍率
maxLines文字显示最大行
avatar
文章
阅读
粉丝