flutter text 左对齐_flutter输入框TextField中文本textAlign对齐分析篇
當(dāng)我們?cè)谑褂靡粋€(gè) TextField 構(gòu)建一個(gè)輸入框時(shí)，會(huì)有如下效果：
在實(shí)際應(yīng)用程序的開(kāi)發(fā)中，有時(shí)我們會(huì)希望輸入的文字居中對(duì)齊或者是右對(duì)齊，那么就應(yīng)用到了我本文章中所講述內(nèi)容，凡是涉及到一個(gè)內(nèi)容，我們務(wù)必精益求精。
1 TextField 輸入文本對(duì)齊配置
在 TextField 組件中，可以通過(guò) textAlign 屬性來(lái)配置TextField 輸入文本對(duì)齊方式，更高級(jí)點(diǎn)的用法就是再結(jié)合 textDirection 文字方向來(lái)配置輸入文本對(duì)齊方式。
一般文字的對(duì)齊方式如下圖所示
我們可以通過(guò) textAlign 屬性很輕松的實(shí)現(xiàn)
// TextAlign.center 居中
// TextAlign.left 靠左對(duì)齊 TextField默認(rèn)使用
// TextAlign.right 靠右對(duì)齊
那么對(duì)于如下取值
// TextAlign.start 文字開(kāi)始位置對(duì)齊
// TextAlign.end 文字結(jié)束位置對(duì)齊
就與文字的繪制方向有關(guān)系了
從上圖可看出 文字繪制方向無(wú)非就是從左向右或者是從右向左，可通過(guò) TextField 的屬性 textDirection 來(lái)配置
/// TextDirection.ltr left to right 文字從左向右
/// TextDirection.rtl right to left 文字從右向左
2 代碼實(shí)現(xiàn)與配置說(shuō)明
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 用來(lái)限制一個(gè)固定 width height 的空間
child: SizedBox(
width: 400,
height: 100,
child: Container(
color: Colors.white24,
padding: EdgeInsets.all(10),
///Alignment 用來(lái)對(duì)齊 Widget
alignment: Alignment(0, 0),
///文本輸入框
child: TextField(
///輸入框內(nèi)輸入文本 居中對(duì)齊
///設(shè)置文本的對(duì)齊方式
// TextAlign.center 居中
// TextAlign.left 靠左對(duì)齊 TextField默認(rèn)使用
// TextAlign.right 靠右對(duì)齊
// TextAlign.justify 拉伸以結(jié)束的文本行以填充容器的寬度。即使用了decorationStyle才起效
// TextAlign.start 針對(duì) 文字方向來(lái)使用 textDirection
// TextDirection.ltr TextAlign.start 左對(duì)齊
// TextDirection.rtl TextAlign.start 右對(duì)齊
// TextAlign.end
// TextDirection.ltr TextAlign.end 右對(duì)齊
// TextDirection.rtl TextAlign.end 左對(duì)齊
textAlign: TextAlign.start,
/// 用來(lái)設(shè)置文字的繪制方向的
/// TextDirection.ltr left to right 文字從左向右
/// TextDirection.rtl right to left 文字從右向左
textDirection: TextDirection.rtl,
),
),
),
),
);
}
}
與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的flutter text 左对齐_flutter输入框TextField中文本textAlign对齐分析篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python用电预测_Python中利用
- 下一篇： asp前端日历_asp显示日历效果