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

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

Output of my code (this is not what i want)

Answer 1

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

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

<root-project>/lib

prefixIcon showcase

OR

suffixIcon 将在文本字段内的文本后显示。

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

suffixIcon showcase

ATTN：上面的代码不包括屏幕截图中显示的边框样式：）

Answer 2

在“在Boarder半径中进行调整”中使用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)))),
      ),
    );
  }
}

Answer 3

使用prefixicon

返回TextFormField（

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

Answer 4

尝试这种方式（使用 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 5

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

您需要在酒馆中添加以下套餐。

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 6

您可以尝试以下方法：

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.grey.withOpacity(0.5),
      width: 1.0,
    ),
    borderRadius: BorderRadius.circular(4.0),
  ),
  margin: EdgeInsets.all(12),
  child: Row(
    children: <Widget>[
      Padding(
        padding: EdgeInsets.only(left: 8),
        child: Icon(
          Icons.search,
          color: Colors.grey,
          size: 20,
        ),
      ),
      new Expanded(
        child: TextField(
          keyboardType: TextInputType.text,
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: "Search by Name",
            hintStyle: TextStyle(color: Colors.grey),
            contentPadding:
                EdgeInsets.symmetric(vertical: 8, horizontal: 8),
            isDense: true,
          ),
          style: TextStyle(
            fontSize: 14.0,
            color: Colors.black,
          ),
        ),
      )
    ],
  ),
)

它将显示为：

Answer 7

如果您需要在文本字段中添加图标，请在其内部使用参数 prefixIcon 和 suffixIcon ，例如

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.mail),
    suffixIcon: Icon(Icons.search),
  ),
);

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

7 个答案: