题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。
重要消息
精通点的可以查看这里 精述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 输入文本 textAlignclass TextFeildHomePage4 extends StatefulWidget {@overrideState<StatefulWidget> createState() {return TextFeildHomePageState();}}class TextFeildHomePageState extends State {@overridevoid initState() {super.initState();}@overrideWidget 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 用来对齐 Widgetalignment: 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,),),),),);}}
