當我們在使用一個 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,

),

),

),

),

);

}

}

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的flutter text 左对齐_flutter输入框TextField中文本textAlign对齐分析篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。