如何让后缀图标出现在文本区域的开头？ [颤抖]

Question

这是我的代码：

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 的高度仅覆盖图标。但是当我尝试 height: double.infinity 或 Expanded() 时，我收到错误。也许是因为图标有点“浮动”在文本字段后面。

Answer 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),
        ),
      ],
    )
  ],
),

Answer 2

尝试使用下面的代码片段，该代码片段在文本表单字段中具有前缀和后缀

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

创建一个像这样的文本字段小部件：

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) {},
          ),