如何使后缀图标出现在文本区域的开头？ [扑]答案

【问题标题】：How to make suffix icon appear at the start of the text area? [Flutter]如何使后缀图标出现在文本区域的开头？ [扑]
【发布时间】：2022-12-16 15:52:45
【问题描述】：

这是我的代码：

TextField(
    key: controller.encryptedTextKey,
    readOnly: true,
    keyboardType: TextInputType.multiline,
    textInputAction: TextInputAction.newline,
    maxLines: null,
    controller: controller.encryptedTextController,
    decoration: InputDecoration(
    hintText: 'text_cryption_encrypted_message_hint'.tr,
    hintMaxLines: 2,
    suffixIcon: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
           onPressed: controller.onSaveEncryptedToClipboard,
           icon: Icon(Icons.copy),
        ),
        IconButton(
            onPressed: controller.onPasteEncryptedFromClipboard,
            icon: Icon(Icons.paste),
         ),
      ],
    ),
  ),
),

我所拥有的是：

我想要的是这样的：

我怎样才能做到这一点？问题是 Row 的高度与 TextField 的高度不同。 Row 的高度仅覆盖图标。但是当我尝试 height: double.infinity 或 Expanded() 时，我得到了错误。可能是因为图标有点“漂浮”在 TextField 后面。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

对行使用 suffix: 而不是 suffixIcon。

suffix: Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: [

虽然后缀并不总是可见，但您可以使用它。

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const Expanded(
      child: TextField(
        keyboardType: TextInputType.multiline,
        textInputAction: TextInputAction.newline,
        maxLines: null,
        decoration: InputDecoration(
          hintText: 'text_cryption_encrypted_message_hint',
          hintMaxLines: 2,
        ),
      ),
    ),
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.copy),
        ),
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.paste),
        ),
      ],
    )
  ],
),

【讨论】：

感谢你的回答。它有点工作，但问题是后缀不是永久可见的。如果您不聚焦它并且不输入任何文本，它就会消失。
在这种情况下，您将 Row 与 Text Field 结合使用

【解决方案2】：

尝试使用以下代码 sn-p 在 textformField 中具有前缀和后缀图标

不要忘记根据要求进行必要的更改

创建一个如下所示的 Textfield 小部件：

import 'package:flutter/material.dart';
import 'package:row_nation/Utils/app_colors.dart';
import 'package:row_nation/Utils/app_font_size.dart';
import 'package:row_nation/Utils/app_font_weight.dart';



class PassWordTextFormFieldWidget extends StatelessWidget {
final TextEditingController controllerName;
final String hintTxt;
final TextInputType keyboardType;
final Color cursorColor;
final Function(String) onChange;
final Function(String) onSaved;
final String? Function(String?)? validatorData;
final IconData prefixIcon;
final IconData suffixIcon;
final Function() sufficIconTap;
PassWordTextFormFieldWidget({
super.key,
required this.controllerName,
required this.hintTxt,
required this.prefixIcon,
required this.keyboardType,
required this.cursorColor,
required this.onChange,
required this.onSaved,
required this.validatorData,
required this.suffixIcon,
required this.sufficIconTap,
});
@override
Widget build(BuildContext context) {
double? height, width;
height = MediaQuery.of(context).size.height;
width = MediaQuery.of(context).size.width;
return Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: AppColors.kEmptyDotColor.withOpacity(0.4),
),
child: TextFormField(
controller: controllerName,
cursorColor: cursorColor,
obscureText: true,
textAlign: TextAlign.left,
keyboardType: keyboardType,
style: Theme.of(context).textTheme.caption?.copyWith(
      color: AppColors.kWhiteColor,
      letterSpacing: 0.2,
      fontSize: AppFontSize.fourteenFontSize,
      fontWeight: AppFontWeight.sixHundredFont,
    ),
validator: (value) {
  // widget.validatorData!(value);

  return validatorData!(value);
},
onChanged: (va) {
  onChange(va);
},
onSaved: (val) {
  print(val);
},
decoration: InputDecoration(
  contentPadding: EdgeInsets.symmetric(
    horizontal: 15,
    vertical: 15,
  ),
  isDense: true,
  hintText: hintTxt,
  hintStyle: Theme.of(context).textTheme.caption?.copyWith(
        color: AppColors.kIconColor,
        fontSize: AppFontSize.twelveFontSize,
        fontWeight: AppFontWeight.fourHundredFont,
      ),
  // When user gets Error

  errorBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(12),
    borderSide: BorderSide(
      color: AppColors.kRedColor,
    ),
  ),

  //  When user getting error and focuses on a textformfield
  focusedErrorBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(12),
    borderSide: BorderSide(
      color: AppColors.kRedColor,
    ),
  ),
  //  When user Focuses on textformField widget
  focusedBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(12),
    borderSide: BorderSide(
      color: AppColors.kSplashBackColor,
    ),
  ),

  //   Default TextformField Color
  enabledBorder: InputBorder.none,

  suffixIcon: GestureDetector(
    onTap: () {
      sufficIconTap();
    },
    child: Icon(
      suffixIcon,
      size: 15,
      color: AppColors.kIconColor,
    ),
  ),

  prefixIcon: Icon(
    prefixIcon,
    size: 15,
    color: AppColors.kIconColor,
  ),

  // border: InputBorder.none,
),
),
);
}
}

并像下面一样使用它

          PassWordTextFormFieldWidget(
          controllerName: passwordController,
          prefixIcon: Icons.lock,
          suffixIcon: Icons.visibility_off,
          sufficIconTap: () {
            print("Visibility Icon Tapped");
          },
          hintTxt: AppStrings.passwordTxt,
          keyboardType: TextInputType.text,
          cursorColor: AppColors.kSplashBackColor,
          onChange: (p0) {},
          onSaved: (p0) {},
          validatorData: (p0) {},
          ),

【讨论】：