Flutter打造吸睛的搜索栏AppBar

2023-11-06 02:58:42

在移动应用程序开发中， AppBar 是一个不可或缺的组件，它通常位于屏幕顶部，包含标题、导航图标和其他控件。在许多情况下，我们需要在 AppBar 中添加一个搜索栏，以便用户可以快速找到他们想要的内容。

Flutter 提供了一个内置的 AppBar 组件，我们可以使用它来创建自定义的搜索栏。下面，我们就来看看如何使用 Flutter 来实现一个自定义的搜索栏 AppBar。

步骤

1. 导入必要的库

首先，我们需要导入必要的库。

import 'package:flutter/material.dart';

2. 创建一个新的 AppBar 类

接下来，我们需要创建一个新的 AppBar 类。这个类将继承自 AppBar 类，并添加一个搜索栏。

class CustomAppBar extends AppBar {
  CustomAppBar({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: TextField(
        decoration: InputDecoration(
          hintText: '搜索',
          border: InputBorder.none,
        ),
      ),
      actions: [
        IconButton(
          icon: Icon(Icons.search),
          onPressed: () {
            // 处理搜索操作
          },
        ),
      ],
    );
  }
}

3. 使用自定义的 AppBar

现在，我们可以在我们的应用程序中使用自定义的 AppBar 了。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(),
      body: Center(
        child: Text('主页'),
      ),
    );
  }
}