当我们在使用一个 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 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,

),

),

),

),

);

}

}