flutter - 颤振如何在右侧创建带有两个图标的文本字段，与图像相同？

Question

如何创建与图像相同的 TextField 小部件，在 x 上我需要清除输入，在搜索图标上我需要调用一些在这里不重要的方法。 在此处输入图像描述

这是现在没有 x 图标的代码。

TextField(
              onChanged: (value) {
                userTappedSearch(value);
              },
              decoration: InputDecoration(
                  hintText: "search",
                  suffixIcon: 
                    Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 0.0, vertical: 20),
                        decoration: new BoxDecoration(
                            color: SBColor.navyBlue,
                            borderRadius: new BorderRadius.only(
                              topRight: const Radius.circular(20.0),
                            )),
                        child: IconButton(
                            icon: Icon(Icons.search),
                            color: SBColor.white,
                            onPressed: () {})),
                  border: OutlineInputBorder(
                      borderRadius: new BorderRadius.only(
                    topRight: const Radius.circular(20.0),
                  ))),
            ),

标签： flutterdart

Answer 1

在 Row 中使用 TextField 和 Container 来实现：

TextEditingController _textController = TextEditingController();

final border = OutlineInputBorder(
  borderRadius: BorderRadius.horizontal(left: Radius.circular(5))
);

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: <Widget>[
            Expanded(
              child: TextField(
                controller: _textController,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10),
                  hintText: 'Search',
                  border: border,
                  errorBorder: border,
                  disabledBorder: border,
                  focusedBorder: border,
                  focusedErrorBorder: border,
                  suffixIcon: IconButton(
                    icon: Icon(Icons.clear),
                    onPressed: () {
                      _textController.clear();
                    },
                  ),
                ),
              ),
            ),
            Container(
              decoration: BoxDecoration(
                color: Colors.blue[800],
                borderRadius: BorderRadius.only(topRight: Radius.circular(10))
              ),
              child: IconButton(icon: Icon(Icons.search, color: Colors.white,), onPressed: (){}),
            )
          ],
        ),
      ),
    ),
  );
} 

结果：