自定义TextFormField Flutter后缀图标

Question

我想用可选的suffixIcon (IconButton) 制作 TextFormField 怎么做？

import 'package:flutter/material.dart';

class CustomTextFormField extends StatelessWidget {
  final String text;
  final String hintText;
  final bool obsecureText;
  final IconButton iconButton;

  const CustomTextFormField({
    Key? key,
    required this.text,
    required this.hintText,
    this.obsecureText = false,
    this.iconButton = IconButton() //I dont know the logic
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(text),
        const SizedBox(height: 8.0),
        Form(
          child: TextFormField(
            obscureText: obsecureText,
            decoration: InputDecoration(
              suffixIcon: iconButton,
              hintText: hintText,
            ),
          ),
        ),
        const SizedBox(height: 24.0),
      ],
    );
  }
}

Answer 1

您可以创建可空的IconButton 和默认iconButton 的onPressed 的回调方法，

final IconButton? iconButton;
final VoidCallback? callback;

const CustomTextFormField({
  this.iconButton,
  this.callback,
  ....
 }

suffixIcon: iconButton ??
    IconButton(
      onPressed: callback,
      icon: const Icon(Icons.ac_unit),
    ),

或者

final IconButton iconButton;
final VoidCallback? callback;

CustomTextFormField({
  this.callback,
  Key? key,
  required this.text,
  required this.hintText,
  this.obsecureText = false,
})  : iconButton = IconButton(
        onPressed: callback,
        icon: const Icon(Icons.ac_unit),
      ),
      super(key: key);

按钮必须使用回调，否则可以进行状态管理。