如何在flutter中构建这种类型的搜索栏？

在Flutter中构建这种类型的搜索栏可以通过使用TextField和IconButton来实现。以下是一个示例代码：

import 'package:flutter/material.dart';

class CustomSearchBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
        color: Colors.grey[200],
        borderRadius: BorderRadius.circular(10),
      ),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                hintText: '请输入搜索关键字',
                border: InputBorder.none,
              ),
            ),
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 处理搜索逻辑
            },
          ),
        ],
      ),
    );
  }
}

这个搜索栏是一个自定义的Widget，它使用Container作为容器，并设置了背景色和圆角边框。内部使用Row来布局TextField和IconButton。TextField用于输入搜索关键字，IconButton是一个带有搜索图标的按钮，点击按钮时可以处理搜索逻辑。

你可以将这个CustomSearchBar作为一个独立的Widget在你的页面中使用，例如：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Search Bar'),
      ),
      body: Center(
        child: CustomSearchBar(),
      ),
    );
  }
}

这样就可以在页面中显示这个自定义的搜索栏了。

关于Flutter的更多信息和学习资源，你可以参考腾讯云的Flutter开发文档：Flutter 开发。