Flutter自定义Appbar搜索框

在Flutter中，你可以通过创建一个自定义的AppBar来添加一个搜索框。以下是一个简单的例子，展示了如何在自定义的AppBar中添加一个搜索框：

import 'package:flutter/material.dart';
 
class CustomAppBar extends StatelessWidget with PreferredSizeWidget {
  final String hintText;
  final ValueChanged<String> onSubmitted;
 
  CustomAppBar({this.hintText, this.onSubmitted});
 
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
 
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: TextField(
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: hintText,
          hintStyle: TextStyle(color: Colors.white70),
          prefixIcon: Icon(Icons.search, color: Colors.white70),
          suffixIcon: IconButton(
            icon: Icon(Icons.clear, color: Colors.white70),
            onPressed: () => onSubmitted(''),
          ),
        ),
        style: TextStyle(color: Colors.white, fontSize: 16.0),
        onSubmitted: onSubmitted,
      ),
      backgroundColor: Colors.blue,
    );
  }
}
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: CustomAppBar(
          hintText: 'Search',
          onSubmitted: (value) {
            // Handle search
            print('Searching for $value');
          },
        ),
        body: Center(
          child: Text('Custom AppBar with Search'),
        ),
      ),
    );
  }
}

在这个例子中，CustomAppBar类继承了StatelessWidget并实现了PreferredSizeWidget，以便可以自定义AppBar的高度。在build方法中，我们创建了一个带有搜索图标和清除按钮的TextField作为AppBar的title。hintText和onSubmitted是可选参数，允许你配置搜索框的提示文本和提交时的回调函数。

在main函数中，我们创建了一个简单的应用，其中使用了CustomAppBar。当用户提交搜索词条时，会通过onSubmitted回调函数处理搜索逻辑。