Flutter中TextField 输入内容居中显示，并将光标自动定位到内容后面

Flutter中TextField 输入内容居中显示，并将光标自动定位到内容后面

1、内容居中 主要有以下几个参数需要设置：

/// 1、TextField 输入框文本对齐方式
textAlignVertical: TextAlignVertical.center,
/// 2、去掉输入显示默认输入字数统计 decoration: InputDecoration的属性
 counterText: "",
/// 3、输入内容居中显示(默认是不居中的，需要结合上面[textAlignVertical: TextAlignVertical.center]
/// 属性才能让内容垂直居中)
contentPadding: const EdgeInsets.symmetric(vertical: 0.0, horizontal: 8.0),

2、光标移动到内容后面

TextField(controller: TextEditingController(text: regionName)
                  ..selection = TextSelection.fromPosition(TextPosition(offset: regionName.length)),
          )

3、项目中使用

class RegionPage extends GetCommonView<RegionLogic> {
  const RegionPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ///目的软键盘不会将底部控件顶上来
      resizeToAvoidBottomInset: false,
      appBar: BrnAppBar(
        title: StringStyles.regionConfig.tr,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            flex: 1,
            child: Obx(
              () => ListView.builder(
                  itemCount: logic.regionList.length,
                  itemBuilder: (context, index) {
                    return _itemContainer(context, index);
                  }),
            ),
          ),
          DividerStyle.divider1Half,
          Container(
            height: 116,
            color: Colors.amber,
          )
        ],
      ),
    );
  }

  ///列表项内容
  Container _itemContainer(BuildContext context, int index) {
    ///区域名称
    var regionName = logic.regionList[index].regionName;
    ///光标移动到内容后面
    var selection = TextSelection.fromPosition(TextPosition(offset: regionName.length));
    return Container(
      width: double.infinity,
      height: 55,
      padding: const EdgeInsets.only(left: 22, right: 0),
      child: Row(
        children: [
          Expanded(
            child: SizedBox(
              height: 45,
              ///输入控件
              child: TextField(
                textAlignVertical: TextAlignVertical.center,
                maxLength: 20,
                maxLines: 1,
                controller: TextEditingController(text: regionName)
                  ..selection = selection,
                ///输入监听
                onChanged: (value) {
                  logic.regionList[index].regionName = value;
                  logic.update();
                },
                decoration: InputDecoration(
                  hintText: '请输入区域名称',
                  hintStyle: Styles.style_979797_12,
                  suffix: Text(
                    '${regionName.length}/20',
                    style: Styles.style_999999_12,
                  ),

                  /// 去掉输入显示默认输入字数统计
                  counterText: "",
                  /// 输入内容居中显示(默认是不居中的，需要结合上面[textAlignVertical: TextAlignVertical.center]
                  /// 属性才能让内容垂直居中)
                  contentPadding: const EdgeInsets.symmetric(
                      vertical: 0.0, horizontal: 8.0),
                  ///使用默认边框
                  border: const OutlineInputBorder(),
                ),
              ),
            ),
          ),
          IconButton(
            onPressed: () {
              logic.regionList.removeAt(index);
            },
            icon: Image.asset(
              AssetsRes.IC_REMOVE,
              width: 28,
              height: 28,
            ),
          )
        ],
      ),
    );
  }
}

4、效果展示