flutter text 左对齐_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 輸入文本 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对齐分析篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python用电预测_Python中利用
- 下一篇： 华为手机怎么看图片属性_华为手机音量小怎