flutter 如何在TextFormField中向hintText添加图标

jqjz2hbq  于 6个月前  发布在  Flutter
关注(0)|答案(4)|浏览(148)

我想添加图标到文本表单字段的hintText字段。我已经阅读了有关前缀图标和后缀图标,但他们永久添加图标。我想作为一个hintText图标,以便当用户点击它消失像hintText。我如何才能实现这一点在Flutter

dgenwo3n

dgenwo3n1#

你不能用TextFormField的属性来实现这一点,但是你可以根据Field的控制器来更改Icon的可见性:

bool isVisible = true;
TextEditingController controller = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: TextFormField(
        controller: controller,
        onChanged: (text){
          setState(() {
            controller.text.isEmpty ? isVisible = true : isVisible = false;
          });
        },
        decoration: InputDecoration(
          hintText: 'hintText',
          prefixIcon: Visibility(
            visible: isVisible,
            child: Icon(Icons.person, color: Colors.grey,),
          ),
        ),
      ),
    ),
  );
}

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

字符串

7ivaypg9

7ivaypg92#

希望这对你有帮助!
x1c 0d1x的数据

import 'package:flutter/material.dart';

class SearchInputWidget extends StatefulWidget {
  final String? hintText;
  final EdgeInsetsGeometry outsidePadding, contentPadding;

  SearchInputWidget({
    Key? key,
    this.hintText = "Search",
    this.outsidePadding = const EdgeInsets.only(top: 18, bottom: 0),
    this.contentPadding = const EdgeInsets.all(16),
  }) : super(key: key);

  @override
  State<SearchInputWidget> createState() => _SearchInputWidgetState();
}

class _SearchInputWidgetState extends State<SearchInputWidget> {
  final ValueNotifier<bool> hintVisibilityNotifier = ValueNotifier(true);

  final TextEditingController textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: widget.outsidePadding,
      child: Stack(
        children: [
          TextFormField(
            textAlign: TextAlign.center,
            controller: textEditingController,
            style: TextStyle(
                // color: Colors.grey.shade500,
                color: Colors.black,
                fontFamily: "Asap",
                fontSize: 20),
            decoration: InputDecoration(
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                    borderSide: BorderSide.none),
                filled: true,
                fillColor: Colors.grey.shade300,
                contentPadding: widget.contentPadding),
            onChanged: (text) {
              if (text.isEmpty) {
                hintVisibilityNotifier.value = true;
              } else {
                hintVisibilityNotifier.value = false;
              }
            },
            onEditingComplete: () {
              if (textEditingController.text.isEmpty) {
                hintVisibilityNotifier.value = true;
              } else {
                hintVisibilityNotifier.value = false;
              }
            },
          ),
          ValueListenableBuilder(
              valueListenable: hintVisibilityNotifier,
              builder: (BuildContext context, bool isVisible, Widget? child) {
                if (isVisible) {
                  return Positioned.fill(
                    child: Align(
                      alignment: Alignment.center,
                      child: IgnorePointer(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.search,
                              color: Colors.grey.shade500,
                              size: 26,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text(
                              widget.hintText!,
                              style: TextStyle(
                                color: Colors.grey.shade500,
                                fontFamily: "Asap",
                                fontSize: 20,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  );
                } else {
                  return SizedBox.shrink();
                }
              })
        ],
      ),
    );
  }
}

字符串

omtl5h9j

omtl5h9j3#

如果你愿意,你可以添加一个表情符号到你的'hintText'字符串。由于表情符号被视为字符串,例如在flutter中,如果你想使用'close'图标,你可以使用'cross mark'表情符号代替
下面给出了搜索表情符号搜索结果🔍


的数据

class ResultPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Padding(
      padding: const EdgeInsets.all(20.0),
      child: TextField(
        decoration:
            InputDecoration(hintText: " ❌   hello this is a hint text"),
      ),
    )));
  }
}

字符串

4xrmg8kj

4xrmg8kj4#

class ResultPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Padding(
      padding: const EdgeInsets.all(20.0),
      child: TextField(
        decoration:
            InputDecoration(
 prefixIcon: Icon(Icons.search, color: Colors.black),
    hintText: "hello this is a hint text")
      ),
    )));
  }
}

字符串

相关问题