Flutter文本字段：如何在边框内添加图标

Question

要复制的搜索栏

我想在搜索栏中添加图标。到目前为止，这是我的代码：

new TextField(
          decoration: new InputDecoration(
            icon: new Icon(Icons.search)
            labelText: "Describe Your Issue...",
            enabledBorder: const OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
              borderSide: const BorderSide(
                color: Colors.grey,
              ),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              borderSide: BorderSide(color: Colors.blue),
            ),
          ),
        ),

这是上面代码的结果（这不是我想要的）：

我的代码的输出（这不是我想要的）

Answer 1

编辑答案

将答案更新为我的原始答案实际上并未涵盖问题的原始上下文。

您可以使用prefixIconinTextField或 inTextFormField来获取一些小部件作为TextField.

例子

    TextField(
//    ...,other fields
      decoration: InputDecoration(
        prefixIcon: prefixIcon??Icon(Icons.done),
      ),
    ),

PS：不要混淆prefixIcon和prefix因为这两个是不同的东西。 https://api.flutter.dev/flutter/material/InputDecoration/prefix.html

另外，如果您想实现浮动应用栏之类的功能，则可以参考我的原始答案。

原答案

您可以使用我的 Flutter 包在您的应用程序中实现Floating AppBar。

您需要在您的 pub 中添加以下包。

rounded_floating_app_bar: ^0.1.0

从命令行运行$ flutter packages get。

现在在您的 Dart 代码中，您可以使用：

import 'package:rounded_floating_app_bar/rounded_floating_app_bar.dart';
...
NestedScrollView(
  headerSliverBuilder: (context, isInnerBoxScroll) {
    return [
      RoundedFloatingAppBar(
        floating: true,
        snap: true,
        title: TextField(
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.search),
            border: InputBorder.none,
          ),
        ),
      ),
    ];
  },
  body: Container(),
),

输出：

Answer 2

TextField(
      decoration: InputDecoration(
        filled: true,
        fillColor: Color(0xFFFFFFFF),
        prefixIcon: Icon(Icons.search, color: Colors.pink),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(30),
          ),
        ),
        hintText: ' Search',
      ),
    ),

Answer 3

您可以使用 InputDecoration 参数 prefixIcon 或 suffixIcon。

prefixIcon将显示在TextField 内的文本之前。

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.done),
  ),
);

前缀图标展示

或者

suffixIcon将显示在 TextField 内的文本之后。

TextField(
  decoration: InputDecoration(
    suffixIcon: Icon(Icons.done),
  ),
);

后缀图标展示

注意：上面的代码不包括屏幕截图中显示的边框样式:)

Answer 4

使用前缀图标

return TextFormField(
  decoration: InputDecoration(
    hintText: hint,
    labelText: label,
    prefixIcon: Icon(Icons.person),
    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
  ),
);

Answer 5

试试这种方式（使用prefixIcon），只需调整边框半径

TextField(
          style: TextStyle(fontSize: 25.0),
          decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
            prefixIcon: Icon(Icons.search),
            hintText: "Describe your issue",
            border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.red[300], width: 32.0),
                    borderRadius: BorderRadius.circular(25.0)
              ),
            focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.red[300], width: 32.0),
                    borderRadius: BorderRadius.circular(25.0)))

希望这有帮助。

Answer 6

在Boarder Radius中的Justjust中使用prefixIcon

import 'package:flutter/material.dart';

class TextFieldShow extends StatelessWidget {
  TextEditingController _controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Tab demo"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextField(
            style: TextStyle(
              fontSize: 25.0,
              color: Colors.blueAccent,
            ),
            decoration: InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                prefixIcon: Icon(Icons.people),
                hintText: "Enter Your Name",
                border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.blueAccent, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0)),
                focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.white, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0)))),
      ),
    );
  }
}