flutter输入框TextField中文本textAlign对齐分析篇

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息

• 精通点的可以查看这里 精述
• Flutter 从入门实践到开发一个APP之UI基础篇 视频
• flutter从入门 到精通 系列文章

---

TextField 系列文章

• TextField的基本使用以及TextField常用属性精讲《点击查看详情》
• TextField 焦点获取控制篇《点击查看详情》
• TextField 输入文本样式 TextStyle 篇《正在发文中》
• TextField 输入文本 textAlign 对齐分析篇《就是本文章了》
• TextField 输入文本 decoration 配置边框样式以及提示文本分析篇《正在发文中》
• TextField TextEditingController 分析篇《正在发文中》

---

当我们在使用一个 TextField 构建一个输入框时，会有如下效果：

在实际应用程序的开发中，有时我们会希望输入的文字居中对齐或者是右对齐，那么就应用到了我本文章中所讲述内容，凡是涉及到一个内容，我们务必精益求精。

1 TextField 输入文本对齐配置

在 TextField 组件中，可以通过 textAlign 属性来配置TextField 输入文本对齐方式，更高级点的用法就是再结合 textDirection 文字方向来配置输入文本对齐方式。

一般文字的对齐方式如下

我们可以通过 textAlign 属性很轻松的实现

   //   TextAlign.center 居中
   //   TextAlign.left 靠左对齐 TextField默认使用
   //   TextAlign.right 靠右对齐

那么对于如下取值

   //   TextAlign.start 文字开始位置对齐
   //   TextAlign.end 文字结束位置对齐

就与文字的绘制方向有关系了


从上图可看出 文字绘制方向无非就是从左向右或者是从右向左，可通过 TextField 的属性 textDirection 来配置

/// TextDirection.ltr left to  right 文字从左向右
/// TextDirection.rtl right to left  文字从右向左

2 代码实现与配置说明

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///整理
///TextField 输入文本 textAlign
class TextFeildHomePage4 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TextFeildHomePageState();
  }
}

class TextFeildHomePageState extends State {


  @override
  void initState() {
    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TextField 讲解"),
      ),
      body: Container(
        ///SizedBox 用来限制一个固定 width height 的空间
        child: SizedBox(
          width: 400,
          height: 100,
          child: Container(
            color: Colors.white24,
            padding: EdgeInsets.all(10),
            ///Alignment 用来对齐 Widget
            alignment: Alignment(0, 0),
            ///文本输入框
            child: TextField(
              ///输入框内输入文本 居中对齐
              ///设置文本的对齐方式
              //   TextAlign.center 居中
              //   TextAlign.left 靠左对齐 TextField默认使用
              //   TextAlign.right 靠右对齐
              //   TextAlign.justify 拉伸以结束的文本行以填充容器的宽度。即使用了decorationStyle才起效
              //   TextAlign.start  针对 文字方向来使用 textDirection
              //        TextDirection.ltr  TextAlign.start 左对齐
              //        TextDirection.rtl  TextAlign.start 右对齐
              //   TextAlign.end
              //       TextDirection.ltr  TextAlign.end 右对齐
              //       TextDirection.rtl  TextAlign.end 左对齐
              textAlign: TextAlign.start,
              /// 用来设置文字的绘制方向的
              /// TextDirection.ltr left to  right 文字从左向右
              /// TextDirection.rtl right to left  文字从右向左
              textDirection: TextDirection.rtl,
            ),
          ),
        ),
      ),
    );
  }
}