Flutter搜索栏插件libadwaita_searchbar的使用

Flutter搜索栏插件libadwaita_searchbar的使用

libadwaita_searchbar 是一个基于 easy_autocomplete 的 Flutter 包，用于在您的应用中添加一个搜索栏。本指南将向您展示如何使用这个包来实现一个基本的搜索功能。

使用方法

首先，确保你已经在项目中引入了 libadwaita_searchbar 包。在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  libadwaita_searchbar: ^x.x.x

然后，你可以使用以下代码来创建一个简单的搜索栏：

import 'package:flutter/material.dart';
import 'package:libadwaita_searchbar/libadwaita_searchbar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String searchedTerm = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('搜索栏演示'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AdwSearchBar(
              onSubmitted: (str) => setState(() => searchedTerm = str),
              controller: TextEditingController(),
            ),
            SizedBox(height: 20),
            Text(
              searchedTerm.isNotEmpty ? searchedTerm : '请输入搜索词',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter搜索栏插件libadwaita_searchbar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter搜索栏插件libadwaita_searchbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，libadwaita_searchbar 是一个基于 Flutter 的插件，用于在应用中集成一个美观的搜索栏。这个插件利用了 LibAdwaita 的设计元素，LibAdwaita 是 GNOME 项目中用于桌面应用的一个现代 UI 库。尽管 Flutter 官方没有直接提供 libadwaita_searchbar 插件，但我们可以假设这是一个基于 LibAdwaita 风格的自定义 Flutter 组件。

以下是一个示例代码，展示了如何在 Flutter 中实现一个类似 LibAdwaita 风格的搜索栏。请注意，这只是一个模拟示例，实际的 libadwaita_searchbar 插件可能有不同的 API。

首先，确保你已经设置了 Flutter 环境，并在 pubspec.yaml 文件中添加了必要的依赖项（这里假设没有特定的第三方库，只是用 Flutter 的内置组件）。

# pubspec.yaml
name: flutter_searchbar_example
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

然后，创建一个新的 Flutter 应用并修改 main.dart 文件：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Search Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();
  final List<String> _suggestions = List.generate(10, (i) => "Suggestion $i");
  List<String> _filteredSuggestions = [];

  void _filterSuggestions(String query) {
    setState(() {
      _filteredSuggestions = _suggestions.where((suggestion) {
        final lowercaseQuery = query.toLowerCase();
        final lowercaseSuggestion = suggestion.toLowerCase();
        return lowercaseSuggestion.contains(lowercaseQuery);
      }).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextField(
          controller: _controller,
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.search),
            hintText: 'Search...',
            border: InputBorder.none,
          ),
          onChanged: (value) {
            _filterSuggestions(value);
          },
        ),
        elevation: 0.0,
        backgroundColor: Colors.transparent,
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: _filteredSuggestions.isEmpty
            ? Center(child: Text('No suggestions'))
            : ListView.builder(
                itemCount: _filteredSuggestions.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_filteredSuggestions[index]),
                    onTap: () {
                      // Handle suggestion selection
                      _controller.text = _filteredSuggestions[index];
                      _controller.clear(); // Optionally clear the search box after selection
                      _filterSuggestions(''); // Reset suggestions
                    },
                  );
                }),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的搜索栏，使用 TextField 作为搜索框，并实时过滤一个静态的字符串列表作为搜索建议。搜索框位于 AppBar 中，AppBar 的背景色被设置为透明，以模拟 LibAdwaita 的简约风格。

这个示例只是一个起点，你可以根据 LibAdwaita 的设计原则进一步自定义搜索栏的样式和行为，例如调整颜色、字体、间距等，以更好地匹配 LibAdwaita 的视觉风格。如果你有一个具体的 libadwaita_searchbar 插件，请查阅其文档以获取更详细的用法和示例。

回到顶部