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

当我们在使用一个 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 { @override State 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, ), ), ), ), ); }}