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

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。

重要消息


在这里插入图片描述

TextField 系列文章


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

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页