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

Question

我有一个带有

TextField

的

InputDecoration

，其中设置了

hintText

和

prefixIcon

，但是我使用的

prefixIcon

属性始终会将图标一直拉到左侧。

TextField(
  textAlign: TextAlign.center,
  decoration: InputDecoration(
    contentPadding: EdgeInsets.fromLTRB(0, 30, 0, 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),
      borderSide: BorderSide(
        color: Color(0xffF1F4FB),
      ),
    ),
  ),
),

我正在尝试更改此设置，以使搜索图标和提示文本最初彼此相邻居中。怎样才能达到这样的效果呢？

Answer 1

这是使用

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

Answer 2

将

prefixIcon

设置为带有 MainAxisAlignment.center 的

Row

可以解决这个问题。 但是它覆盖了整个文本字段，因此当文本字段处于焦点状态时，我们需要将其替换为普通图标。
您可以使用

FocusNode

检测焦点。要了解更多信息，请阅读焦点和文本字段

代码：

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, 0, 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),
          borderSide: BorderSide(
            color: Color(0xffF1F4FB),
          ),
        ),
      ),
    );
  }
}

Answer 3

我用

prefixIconConstraints

来做到这一点。只需将其添加到您的

TextFormField

的装饰中，就像这样：prefixIcon

您还应该通过在 

prefixIconConstraints: const BoxConstraints(),
prefixIcon: Container(
   margin: EdgeInsets.symmetric(horizontal: 12),
   child: const Text('Rp'),
),

的装饰中添加一些填充来使您的字段看起来更大：

TextFormField

Answer 4

Flutter官方方式

使用

contentPadding: EdgeInsets.all(8),

小部件。与

Align

和

widthFactor