Flutter：如何在输入装饰内的提示文本旁边将图标居中？

如何解决Flutter：如何在输入装饰内的提示文本旁边将图标居中？

我有一个带有 TextField 的 Inputdecoration，我在其中设置了 hintText 和 prefixIcon，但是我使用的 prefixIcon 属性总是会拉图标一直向左。

TextField(
  textAlign: TextAlign.center,decoration: Inputdecoration(
    contentPadding: EdgeInsets.fromLTRB(0,30,30),prefixIcon: Icon(Icons.search),hintText: 'Search',fillColor: Color(0xffF1F4FB),filled: true,enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(25),borderSide: BorderSide(
        color: Color(0xffF1F4FB),),disabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(25),

我正在尝试将其更改为使搜索图标和提示文本最初彼此并排居中。我怎样才能达到这个效果？

解决方法

这是使用 IntrinsicWidth 的解决方案。

使用此解决方案，搜索图标将位于 hinttext 旁边，然后将位于用户输入的文本旁边。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,title: 'Flutter Demo',home: HomePage(),),);
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 48.0,padding: EdgeInsets.symmetric(horizontal: 16.0,vertical: 0.0),margin: EdgeInsets.all(8.0),decoration: BoxDecoration(
            color: Colors.amber.shade300,border: Border.all(
              color: Colors.brown,width: 3.0,borderRadius: BorderRadius.circular(25),child: Center(
            child: IntrinsicWidth(
              child: TextField(
                textAlignVertical: TextAlignVertical.center,decoration: InputDecoration(
                  prefixIcon: Icon(Icons.search),hintText: 'Search',border: InputBorder.none,);
  }
}

使用 MainAxisAlignment.center 将 prefixIcon 设置为 Row 可以解决问题。但是它覆盖了整个textField，所以当textField处于焦点时我们需要用普通图标替换它。
您可以使用 FocusNode 检测焦点。要了解更多信息，请阅读 Focus and text fields

代码：

class MyTextField extends StatefulWidget {
  const MyTextField({Key key}) : super(key: key);

  @override
  _MyTextFieldState createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  TextEditingController _controller = TextEditingController();
  FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    // rebuild the textfield on focus changes
    _focusNode.addListener(() {
      setState(() {});
    });
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,focusNode: _focusNode,textAlign: TextAlign.center,decoration: InputDecoration(
        contentPadding: EdgeInsets.fromLTRB(0,30,30),prefixIcon: !_focusNode.hasFocus && _controller.text.isEmpty
            ? Row(
                mainAxisAlignment: MainAxisAlignment.center,children: [
                  Icon(Icons.search),Text('Search'),],)
            : Icon(Icons.search),// hintText: 'Search',fillColor: Color(0xffF1F4FB),filled: true,enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(25),borderSide: BorderSide(
            color: Color(0xffF1F4FB),disabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(25),);
  }
}