在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 开发。
领取专属 10元无门槛券
手把手带您无忧上云