flutter的Swiper获取当前索引

转载

ctaxnews 2024-12-30 14:35:42

文章标签 flutter android 搜索 ide 输入框 文章分类 数据仓库大数据

文章目录

前言
一、showSearch 是什么？
二、使用步骤

1.重新四个方法

建议推荐页面，搜索结果页面，返回按键，输入框后的widget

2.按键触发显示
3.全部代码
4.实现截图

总结

前言

一、showSearch 是什么？

显示搜索功能页面，点击就跳转到该搜索页面的功能，快速完成搜索功能

二、使用步骤

1.重新四个方法

建议推荐页面，搜索结果页面，返回按键，输入框后的widget

代码如下（示例）：

class MySerarchDelegtae extends SearchDelegate {
  // showSearch 的四个方法需要重新，才能实现想要点击跳转到搜搜的界面
  @override
  List<Widget>? buildActions(BuildContext context) {
    // TODO: implement buildActions
    //输入框后的widget
    return [
      IconButton(
          onPressed: () {
            query = '';
          },
          icon: Icon(Icons.clear))
    ];
  }

  @override
  Widget? buildLeading(BuildContext context) {
    // TODO: implement buildLeading
    // 搜索框前面的按键，比如一个返回或者其他的
    return IconButton(
        onPressed: () {
          close(context, ""); //关闭当前页面
        },
        icon: Icon(Icons.arrow_back));
  }

  @override
  Widget buildResults(BuildContext context) {
    // TODO: implement buildResults
    // 结果，点击确认搜索之后要显示给用户的搜索结果的widget
    return ListView(
      children: [
        Center(
          child: Container(
            height: 100,
            width: double.infinity,
            color: Colors.pink,
            child: Text('$query'),
          ),
        )
      ],
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    // TODO: implement buildSuggestions
    //相当于搜索输入框的，onchange 回调该方法的功能
    // 一般作为联想的文本的功能
    // query 输入框里面的内容
    return ListView.separated(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('$query 可以选列表$index'),
            onTap: () {
              query = "";
              query = '$query 可以选列表$index';
            },
          );
        },
        separatorBuilder: (context, index) {
          return Divider();
        },
        itemCount: Random().nextInt(8));
  }
}

2.按键触发显示

代码如下（示例）：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
              onPressed: () {
                showSearch(context: context, delegate: MySerarchDelegtae());
              },
              icon: Icon(Icons.manage_search_rounded))
        ],
        title: Text(widget.title),
      ),

3.全部代码

import 'dart:math';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
              onPressed: () {
                showSearch(context: context, delegate: MySerarchDelegtae());
              },
              icon: Icon(Icons.manage_search_rounded))
        ],
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class MySerarchDelegtae extends SearchDelegate {
  // showSearch 的四个方法需要重新，才能实现想要点击跳转到搜搜的界面
  @override
  List<Widget>? buildActions(BuildContext context) {
    // TODO: implement buildActions
    //输入框后的widget
    return [
      IconButton(
          onPressed: () {
            query = '';
          },
          icon: Icon(Icons.clear))
    ];
  }

  @override
  Widget? buildLeading(BuildContext context) {
    // TODO: implement buildLeading
    // 搜索框前面的按键，比如一个返回或者其他的
    return IconButton(
        onPressed: () {
          close(context, ""); //关闭当前页面
        },
        icon: Icon(Icons.arrow_back));
  }

  @override
  Widget buildResults(BuildContext context) {
    // TODO: implement buildResults
    // 结果，点击确认搜索之后要显示给用户的搜索结果的widget
    return ListView(
      children: [
        Center(
          child: Container(
            height: 100,
            width: double.infinity,
            color: Colors.pink,
            child: Text('$query'),
          ),
        )
      ],
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    // TODO: implement buildSuggestions
    //相当于搜索输入框的，onchange 回调该方法的功能
    // 一般作为联想的文本的功能
    // query 输入框里面的内容
    return ListView.separated(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('$query 可以选列表$index'),
            onTap: () {
              query = "";
              query = '$query 可以选列表$index';
            },
          );
        },
        separatorBuilder: (context, index) {
          return Divider();
        },
        itemCount: Random().nextInt(8));
  }
}