（五）TextWidget

最新推荐文章于 2023-04-25 20:30:00 发布

原创最新推荐文章于 2023-04-25 20:30:00 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载文章须附上文章来源与作者。

文章标签：

#TextWidget #Flutter

Web前端同时被 2 个专栏收录

27 篇文章

订阅专栏

Flutter教程

9 篇文章

订阅专栏

本文深入探讨Flutter中常用Widget的功能与应用，包括Text、Row、Column、Stack和Container等，详细介绍各Widget属性及布局原理，如Flexbox、绝对定位、文本样式设置等，帮助开发者掌握Flutter界面构建技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于 Widget 部件

Flutter有一套丰富、强大的基础widget，其中以下是很常用的：
- Text：该 widget 可让创建一个带格式的文本。
- Row、 Column：这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。
- Stack：取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆叠，你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。
- Container： Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可以使用矩阵在三维空间中对其进行变换。

TextWidget

style,
strutStyle,
textAlign
- TextAlign 类型
  - left 左对齐
  - right 右对齐
  - center 居中
  - justify
  - start
  - end
textDirection,
locale,
softWrap 是否自动换行
- false ：文字不考虑容器大小单行显示，若超出屏幕部分将默认截断处理
overflow 文字超出屏幕之后的处理方式
- TextOverflow 类型
  - TextOverflow.clip剪裁
  - TextOverflow.fade 渐隐
  - TextOverflow.ellipsis 省略号
textScaleFactor,
maxLines,
semanticsLabel,

import 'package:flutter/material.dart'; 

/*
Flutter 一切皆Widget
*/
void main() => runApp(MyApp());

// 继承静态组件
class MyApp extends StatelessWidget {

  //重写 build 方法 返回Widget组件
  //传一个build 上下文
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Hello TextWidget',
      // home 给个脚手架组件
      home:  Scaffold(
        appBar: AppBar(
          title: Text('Hello AppBar Title'),
          ),
        body: Center(
          child: Text(
              'hello TextWidget Body' * 10,
              /*
               文本对齐
               */
              textAlign: TextAlign.left,
              /*
              * 显示最大行
              * */
              maxLines: 1,
              /* TextOverflow.ellipsis 超出行数有省略号
               * TextOverflow.fade     超出部分上下渐变
                * */
              overflow: TextOverflow.ellipsis,
              /*
              * 文本样式
              * */
              style: TextStyle(
                fontSize: 25.0,
                color: Color.fromARGB(255, 255, 333, 333),
                decorationStyle: TextDecorationStyle.solid,
              ),
          ),
        ),
      ),
    );
  }

}