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

作者：Cpp五条 | 2024-03-22 17:31:25

踩

van-field 输入框 vant 更改占位提示文字从右到左direction: rtl;

http://weixin.qq.com/r/bUzg_G3EmDDnrSmb9xl- (二维码自动识别)

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/289776