精华内容
下载资源
问答
  • Flutter搜索框SearchBar

    千次阅读 2020-06-25 15:24:01
    Flutter搜索框

    题记
    —— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。

    重要消息


    1 使用封装库

    1.1 添加依赖

    小编已将本效果写成一个依赖库,读者可根据使用直接添加依赖,代码如下:
    github方式依赖

      flutter_search_bars:
        git:
          url: https://github.com/zhaolongs/flutter_search_bar.git
          ref: master
    

    pub仓库依赖 查看最新版本

      #搜索框
      flutter_search_bars: ^0.0.1
    

    1.2 导包

    在使用到搜索框 SearchBar 的地方导包如下:

    import 'package:flutter_search_bars/flutter_search_bars.dart';
    

    1.3 使用

    1.3.1 默认大小使用
    ///这里只是用于显示的搜索框不用做输入
    ///参数[heroTag]用于页面过渡动画tag
    ///参数clickCallBack为当前搜索框点击事件回调
    SearchStaticBar(
    	heroTag: "searchStatidBar",
    	clickCallBack: () {
    	  NavigatorUtils.pushPage(context, TestPage2());
    	},
    )
    
    1.3.2 指定大小使用
     Container(
         width: 120,
          ///这里只是用于显示的搜索框不用做输入
          ///参数[heroTag]用于页面过渡动画tag
          ///参数clickCallBack为当前搜索框点击事件回调
          child: SearchStaticBar(
            heroTag: "searchStatidBar",
            clickCallBack: () {
              NavigatorUtils.pushPage(context, TestPage2());
            },
          ),
        )
    

    运行效果如下:
    在这里插入图片描述

    使用案例效果如下:
    在这里插入图片描述

    展开全文
  • 说明showSearch 是直接跳转到搜索页面,用法如下:showSearch(context: context, delegate: CustomSearchDelegate());classCustomSearchDelegateextendsSearchDelegate<String>{@overrideList buildActions...

    c9a23839f6e81b89c876231d047e8730.gif

    说明

    showSearch 是直接跳转到搜索页面,用法如下:

    showSearch(context: context, delegate: CustomSearchDelegate());

    class CustomSearchDelegate extends SearchDelegate<String>{
      @override
      ListbuildActions(BuildContext context) {
        return null;
      }

      @override
      Widget buildLeading(BuildContext context) {
        return null;
      }

      @override
      Widget buildResults(BuildContext context) {
        return null;
      }

      @override
      Widget buildSuggestions(BuildContext context) {
        return null;
      }

    }

    使用showSearch,首先需要重写一个SearchDelegate,实现其中的4个方法。

    buildLeading表示构建搜索框前面的控件,一般是一个返回按钮,点击退出,代码如下:

    @override
    Widget buildLeading(BuildContext context) {
      return IconButton(
        icon: Icon(Icons.arrow_back,color: Colors.blue,),
        onPressed: (){
          close(context, '');
        },
      );
    }

    buildSuggestions是用户正在输入时显示的控件,输入框放生变化时回调此方法,通常返回一个ListView。

    用法示例如下:

      @override
      Widget buildSuggestions(BuildContext context) {
        final suggestionList = query.isEmpty
            ? recentSuggest
            : searchList.where((input) => input.startsWith(query)).toList();
        return ListView.builder(
            itemCount: suggestionList.length,
            itemBuilder: (context, index) => ListTile(
                  title: RichText(
                      text: TextSpan(
                          text: suggestionList[index].substring(0, query.length),
                          style: TextStyle(
                              color: Colors.black, fontWeight: FontWeight.bold),
                          children: [
                        TextSpan(
                            text: suggestionList[index].substring(query.length),
                            style: TextStyle(color: Colors.grey))
                      ])),
                ));
      }

    buildActions输入框后面的控件,一般情况下,输入框不为空,显示一个清空按钮,点击清空输入框:

    @override
    ListbuildActions(BuildContext context)
    {
      return [
        IconButton(
          icon: Icon(
            Icons.clear,
          ),
          onPressed: () {
            query = '';
          },
        )
      ];
    }

    buildResults是构建搜索结果控件,当用户点击软键盘上的“Search”时回调此方法,一般返回ListView,用法如下:

    @override
      Widget buildResults(BuildContext context) {
        return ListView.separated(
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(
                '搜索到的第$index结果',
                style: TextStyle(fontSize: 20),
              ),
              onTap: () {
                print("点击了第$index结果");
              },
            );
          },
          separatorBuilder: (context, index) {
            return Divider();
          },
          itemCount: 10,
        );
      }

    示例演示

    import 'package:flutter/material.dart';

    const searchList = ["上衣", "华为", "电视", "新闻"];

    const recentSuggest = ["推荐-1", "推荐-2"];

    class SearchBarDemo extends StatefulWidget {
      _SearchBarDemoState createState() => _SearchBarDemoState();
    }

    class _SearchBarDemoState extends State<SearchBarDemo> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('SearchBarDemo'), actions: [
          IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                showSearch(context: context, delegate: searchBarDelegate());
              }
              ),
        ]));
      }
    }class searchBarDelegate extends SearchDelegate<String> {
      @override
      List buildActions(BuildContext context) {return [
          IconButton(
            icon: Icon(Icons.clear),
            onPressed: () => query = "",
          )
        ];
      }
      @override
      Widget buildLeading(BuildContext context) {return IconButton(
            icon: AnimatedIcon(
                icon: AnimatedIcons.menu_arrow, progress: transitionAnimation),
            onPressed: () => close(context, null));
      }
      @override
      Widget buildResults(BuildContext context) {return ListView.separated(
          itemBuilder: (context, index) {return ListTile(
              title: Text('搜索到的第$index结果',
                style: TextStyle(fontSize: 20),
              ),
              onTap: () {print("点击了第$index结果");
              },
            );
          },
          separatorBuilder: (context, index) {return Divider();
          },
          itemCount: 10,
        );
      }
      @override
      Widget buildSuggestions(BuildContext context) {
        final suggestionList = query.isEmpty
            ? recentSuggest
            : searchList.where((input) => input.startsWith(query)).toList();return ListView.builder(
            itemCount: suggestionList.length,
            itemBuilder: (context, index) => ListTile(
                  title: RichText(
                      text: TextSpan(
                          text: suggestionList[index].substring(0, query.length),
                          style: TextStyle(
                              color: Colors.black, fontWeight: FontWeight.bold),
                          children: [
                        TextSpan(
                            text: suggestionList[index].substring(query.length),
                            style: TextStyle(color: Colors.grey))
                      ])),
                  onTap: () {print("点击了 ${suggestionList[index]}");
                  },
                ));
      }
    }

    效果:

    2112df88ffd0461c5300de99a785f16c.gif

    点击事件,观察日志:

    flutter: 点击了第0结果
    flutter: 点击了第3结果
    flutter: 点击了 华为

      码上加油站

      一起来加油

    长按扫码关注

    92666d015209e39cd5c278c0710d2405.png

    点“在看你懂得

    a9b64204486d4afacff0b5972e741462.png
    展开全文
  • There are many flutter widgets to implement search feature just like in Android, yet there is a simpler way to implement this using flutter SearchDelegate class which gives you almost all that you wan...

    flutter 搜索框过滤

    There are many flutter widgets to implement search feature just like in Android, yet there is a simpler way to implement this using flutter SearchDelegate class which gives you almost all that you want in only 4–5 simple steps so let’s see what we can do with this

    就像Android中一样,有很多flutter小部件来实现搜索功能,但是有一种使用flutter SearchDelegate类实现此功能的简单方法,仅需4-5个简单步骤就可以提供几乎所有您想要的东西,因此让我们看看我们可以做什么这个

    We will need to explore two classes before we start

    在开始之前,我们需要探索两个课程

    SliverAppBar (SliverAppBar)

    When we want a dynamic toolbar that when we slide or expand it shows us content, we use the great widget called SliverAppBar which always be the first child for CustomScrollView.

    当我们需要一个动态工具栏来滑动或展开它来显示内容时,我们使用了名为SliverAppBar的出色小部件 它始终是CustomScrollView的第一个孩子。

    CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          forceElevated: true,
          elevation: 4,
          floating: true,
          snap: true,
          title: Text(
            "Search Example",
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.search,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(
                Icons.filter_list,
              ),
              onPressed: () {},
            ),
          ],
        ),
      ],
    )

    This will make a cute app bar with two icons

    这将使带有两个图标的可爱应用栏

    Image for post

    Next we will implement the search feature.

    接下来,我们将实现搜索功能。

    CustomSearchDelegate (CustomSearchDelegate)

    To make a custom search , you need to create a new class that extends the SearchDelegate class. after overriding the SearchDelegate method you will have this class

    要进行自定义搜索,您需要创建一个扩展SearchDelegate类的新类。 覆盖SearchDelegate方法后,您将拥有此类

    class CustomSearchClass extends SearchDelegate{
      @override
      List<Widget> buildActions(BuildContext context) {
        // here you will add the action you need in your search later we   will add a clear button.
    
    
        throw UnimplementedError();
      }
    
    
      @override
      Widget buildLeading(BuildContext context) {
        // here you will add the leading actions that will be shown before the search bar ( such a back button ) 
        throw UnimplementedError();
      }
    
    
      @override
      Widget buildResults(BuildContext context) {
        // in this method you will build your search results widget and how would you like to view them on screen
        throw UnimplementedError();
      }
    
    
      @override
      Widget buildSuggestions(BuildContext context) {
        // you can use this method to show suggestions before the user start search or to view a real time search results as we will show later 
        throw UnimplementedError();
      }
      
    }

    Now let's build our search class, a simple class will be shown below

    现在,我们来构建搜索类,下面将显示一个简单的类

    class CustomSearchClass extends SearchDelegate {
    
    
      @override
      List<Widget> buildActions(BuildContext context) {
      
    // this will show clear query button
        return [
          IconButton(
            icon: Icon(Icons.clear),
            onPressed: () {
              query = '';
            },
          ),
        ];
      }
    
    
      @override
      Widget buildLeading(BuildContext context) {
      
    // adding a back button to close the search 
        return IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            close(context, null);
          },
        );
      }
    
    
      @override
      Widget buildResults(BuildContext context) {
    //clear the old search list
        searchResult.clear();
        
    //find the elements that starts with the same query letters.
    // allNames is a list that contains all your data ( you can replace it here by an http request or a query from your database )
        searchResult =
            allNames.where((element) => element.startsWith(query)).toList();
            
    // view a list view with the search result
        return Container(
          margin: EdgeInsets.all(20),
          child: ListView(
              padding: EdgeInsets.only(top: 8, bottom: 8),
              scrollDirection: Axis.vertical,
              children: List.generate(searchResult.length, (index) {
                var item = searchResult[index];
                return Card(
                  color: Colors.white,
                  child: Container(padding: EdgeInsets.all(16), child: Text(item)),
                );
              })),
        );
      }
    
    
      @override
      Widget buildSuggestions(BuildContext context) {
    
    
    // I will add this step as an optional step later 
    return null;  
    }

    Now we just have to connect our cute search app bar with our custom search class

    现在,我们只需要将可爱的搜索应用栏与自定义搜索类连接即可

    if you remember our search button icon from the above silver app bar we just need to add the showSearch method to connect the app to the searchClass, the rest is magic ^-^.

    如果您还记得上面银色应用程序栏中的搜索按钮图标,我们只需要添加showSearch方法将应用程序连接到searchClass,剩下的就是神奇的^-^。

    IconButton(
      icon: Icon(
        Icons.search,
      ),
      onPressed: () {
        showSearch(
          context: context,
          delegate: customSearchClass(),
        );
      },
    ),
    Image for post
    the search widget view
    搜索窗口小部件视图

    I added some optional features like instant search suggestions and recent search suggestions to the example, the source code can be found here.

    我在示例中添加了一些可选功能,例如即时搜索建议和最近的搜索建议,可在此处找到源代码。

    https://github.com/Ezaldeen99/search_demo

    https://github.com/Ezaldeen99/search_demo

    翻译自: https://levelup.gitconnected.com/implement-a-search-and-filter-in-flutter-56d046e12c05

    flutter 搜索框过滤

    展开全文
  • 概要:目前App中较为常见有三种导航栏设计... 导航栏搜索功能6. 总结1前言Flutter中的导航栏会涉及到以下几个核心点,我整理了以下表格进行说明:可以看到上述导航栏都是 Scaffold 的一个属性,这就类似于一个架子,...
    概要:目前App中较为常见有三种导航栏设计,分别是底部导航栏、顶部导航栏和侧边导航栏。本文主要介绍利用Flutter实现上面三种导航栏功能。目录:1.  前言2. 底部导航栏3. 顶部导航栏4. 侧边导航栏5. 导航栏搜索功能6. 总结

    1

    前言Flutter中的导航栏会涉及到以下几个核心点,我整理了以下表格进行说明:5c151178ddf5f83fc03740ddf108b135.png可以看到上述导航栏都是 Scaffold 的一个属性,这就类似于一个架子,架子提供了很多模块。如果我们需要某些模块,只需要按照模块的格式插入数据,就可以实现相应功能。这个控件的一些参数属性含义如下:
    const Scaffold({  Key key,this.appBar, // 应用栏,显示在顶部,包括其中的搜索框this.body, // 页面的主题显示内容this.floatingActionButton, // 设置显示在上层区域的按钮,默认位置位于右下角this.floatingActionButtonLocation, // 设置floatingActionButton的位置this.floatingActionButtonAnimator, // floatingActionButton动画this.persistentFooterButtons, // 在底部导航栏之上的一组操作按钮this.drawer, // 左侧导航栏this.endDrawer, // 右侧导航栏this.bottomNavigationBar, // 底部导航栏this.bottomSheet, // 底部可隐藏导航栏this.backgroundColor, // 内容区域颜色this.resizeToAvoidBottomPadding, // 是否重新布局来避免底部被覆盖了,比如当键盘显示的时候,重新布局避免被键盘盖住内容。默认值为 true。this.resizeToAvoidBottomInset, //键盘弹出时是否重新绘制,以避免输入框被遮挡this.primary = true, // 是否计算手机顶部状态栏的高度this.drawerDragStartBehavior = DragStartBehavior.start, // 拖动的处理this.extendBody = false, // 是否延伸body至底部this.extendBodyBehindAppBar = false, // 是否延伸body至顶部this.drawerScrimColor, // 抽屉遮罩层背景色this.drawerEdgeDragWidth, // 滑动拉出抽屉的生效距离this.drawerEnableOpenDragGesture = true, // 确定是否可以通过拖动手势打开Scaffold.drawer, 默认情况下,拖动手势处于启用状态this.endDrawerEnableOpenDragGesture = true, // 确定是否可以使用拖动手势打开Scaffold.endDrawer,默认情况下,拖动手势处于启用状态。})
     基本属性介绍完后,我们下面就开始实现三种经典的导航栏。

    2

    底部导航栏根据控件 Scaffold 的说明,底部导航栏的开发会涉及 bottomNavigationBar 这个属性,在表格中有说明到该属性对应的是一个 BottomNavigationBar 组件,该组件的属性也比较多,具体说明如下所示:
    BottomNavigationBar({  Key key,@required this.items, // 数组,对应于BottomNavigationBarItem这个组件为菜单栏的每一项,其中包含四个属性icon、title、activeIcon和backgroundColorthis.onTap, // 点击触发逻辑,一般用来触发页面的跳转更新this.currentIndex = 0, // 当前所在的 items 数组中的位置this.elevation = 8.0, // 设置阴影效果值  BottomNavigationBarType type, // fixed(固定位置)和shifting(浮动效果)  Color fixedColor, // 代表选中时候的颜色,不能和selectedItemColor一起使用this.backgroundColor, // 背景颜色this.iconSize = 24.0, // icon 大小  Color selectedItemColor, // 代表选中的颜色,不能和selectedItemColor一起使用this.unselectedItemColor, // 未选中时颜色this.selectedIconTheme = const IconThemeData(), // 当前选中的BottomNavigationBarItem.icon中图标的大小,不透明度和颜色this.unselectedIconTheme = const IconThemeData(), // 当前未选中的BottomNavigationBarItem.icon中图标的大小,不透明度和颜色this.selectedFontSize = 14.0, // 选中的字体大小this.unselectedFontSize = 12.0, // 未选中字体大小this.selectedLabelStyle, // 选中字体样式this.unselectedLabelStyle, // 未选中字体样式this.showSelectedLabels = true, // 是否开启选中的样式  bool showUnselectedLabels, // 是否开启未选中的样式})
    介绍完一些基础属性以后,我们来尝试实现底部导航栏功能。我们实现两个页面,通过使用导航栏的方式来支持页面跳转。底部导航栏需要一个状态属性 indexValue 来控制导航栏显示位置,我们看下具体在 Scaffold 中的代码逻辑。
    return Scaffold(appBar: AppBar(    title: Text('MORTAL'), // 页面名字),body: Stack(children: [_getPagesWidget(0),_getPagesWidget(1),_getPagesWidget(2)],),bottomNavigationBar: BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.people),        title: Text('首页'),activeIcon: Icon(Icons.people_outline),),BottomNavigationBarItem(icon: Icon(Icons.favorite),        title: Text('发现'),activeIcon: Icon(Icons.favorite_border),),BottomNavigationBarItem(icon: Icon(Icons.person),title: Text('我'),activeIcon: Icon(Icons.person_outline),),],iconSize: 24,currentIndex: _indexNum,/// 选中后,底部BottomNavigationBar内容的颜色(选中时,默认为主题色)/// (仅当type: BottomNavigationBarType.fixed,时生效)fixedColor: Colors.lightBlueAccent,type: BottomNavigationBarType.fixed,onTap: (int index) {///这里根据点击的index来显示,非index的page均隐藏if(_indexNum != index){setState(() {_indexNum = index;});}},),);
    上面代码中,第 5 - 10 行是获取具体的页面信息,并且在 _getPagesWidget 里会判断当前 index 的值,判断当前索引 _indexNum 与 index 是否相同,相同则显示页面,不相同则页面隐藏,具体 _getPagesWidget 代码实现逻辑如下:
    /// 获取页面组件Widget _getPagesWidget(int index) {  List widgetList = [    router.getPageByRouter('homepage'),    Icon(Icons.directions_transit),    router.getPageByRouter('userpage')  ];return Offstage(    offstage: _indexNum != index,    child: TickerMode(      enabled: _indexNum == index,      child: widgetList[index],    ),  );}
    Scaffold 中代码的第 12 行开始实现底部导航栏逻辑,其中使用到了 BottomNavigationBar 控件,配置控件中的 items 属性,该属性注意是导航栏具体每一项数据,iconSize、currentIndex、fixedColor、type 和 onTap,onTap 主要是来切换页面,触发 setState ,然后重新 build 页面结构。以上就完成了导航栏的设计,运行完以后,就可以正常进行页面切换操作。

    3

    顶部导航栏顶部导航栏,需要控件 Scaffold 属性 appBar ,在 appBar 中设置 bottom 就可以实现顶部导航栏功能。接下来看下 bottom 的设置方法,代码如下:
    return Scaffold(appBar: AppBar(    title: Text('MORTAL'), // 页面名字bottom: TabBar(controller: _controller,tabs: [Tab(icon: Icon(Icons.view_list),          text: '首页',),Tab(icon: Icon(Icons.favorite),          text: '发现',),Tab(icon: Icon(Icons.person),text: '我',),],),),body: TabBarView(controller: _controller,children: [router.getPageByRouter('homepage'),Icon(Icons.directions_transit),router.getPageByRouter('userpage')],),);
    在上面代码中的第 4 到第 21 行是在设置 bottom 的 TabBar 组件。在 TabBar 中,包含了一个控制导航栏的 controller 和具体导航栏的配置信息的 Tabs。在代码第 22 行到第 29 行也是在配置各个 tab 对应的页面内容组件,这里也是通过 controller 来控制显示,具体 controller 控制部分代码如下:
    /// 跳转页面void redirect(String link) {if (link == null) {return;  }int indexNum = router.open(context, link);if (indexNum > -1 && _controller.index != indexNum) {    _controller.animateTo(indexNum);  }}
    顶部导航栏的跳转逻辑部分和底部导航栏相似,这里是使用状态变量 _controller 的 animateTo 方法来处理 tab 的切换。

    4

    侧边导航栏侧边导航栏主要使用的是 Scaffold 的 drawer 属性。该属性需要一个 Drawer 对象,因此我们可以在 Widgets 目录中创建一个 menu 目录,并新增 draw.dart 文件,具体代码如下:
    import 'package:flutter/material.dart';import 'package:MORTAL/router.dart';/// 左侧菜单class MenuDraw extends StatelessWidget {/// 外部跳转final Function redirect;/// 默认构造函数const MenuDraw(this.redirect);@overrideWidget build(BuildContext context) {return Drawer(        child: MediaQuery.removePadding(          context: context,          child: ListView(            children: [              ListTile(                leading: Icon(Icons.view_list),                title: Text('首页'),                onTap: () {                  Navigator.pop(context);                  redirect('tyfapp://homepage');                },              ),              ListTile(                leading: Icon(Icons.favorite),                title: Text('发现'),                onTap: () {                  Navigator.pop(context);                  Router().open(context, 'http://www.baidu.com');                },              ),              ListTile(                leading: Icon(Icons.person),                title: Text('我'),                onTap: () {                  Navigator.pop(context);                  redirect('tyfapp://mypage');                },              ),            ],          ),        ),    );  }}
    前 4 行是导入相应的库,创建 MenuDraw 类,类包含 redirect 方法,该方法就是 entrance 中声明的 tab 导航栏切换的方法,如果非 entrance 的切换则需要使用到 router 跳转,类似上面代码中的第 33 行 。代码的第 19 行到第 44 行则为相应的左侧导航栏的配置,onTap 为导航栏的跳转逻辑,在点击相应的 Tap 以后,需要使用 Navigator.pop(context) 来关闭左侧导航栏。实现完成该 MenuDraw 类后,我们需要在控件 Scaffold 中增加 drawer 属性,代码如下。
    return Scaffold(appBar: AppBar(title: Text('MORTAL App'), // 页面名字),drawer: MenuDraw(redirect),...);
    上面代码的第 5 行就是新增 drawer 左侧导航栏.

    5

    搜索功能为了让功能更完善,我们需要增加一个右侧搜索功能,这里就涉及 AppBar 的 actions 属性,我们可以在 AppBar 中增加如下代码:
    AppBar(  title: Text('MORTAL'), // 页面名字actions: [IconButton(icon: Icon(Icons.search),onPressed: () {showSearch(context: context,delegate: SearchPageCustomDelegate());},),],)
    在 actions 中可以添加一组功能按钮,由于这里我们只需要搜索功能按钮,因此在 actions 属性中添加一个 IconButton 即可。IconButton 中需要展示一个搜索 icon ,并且点击以后前往搜索页面。接下来我们就需要实现SearchPageDelegate 的页面逻辑,新增 search_page 页面,并在 search_page 下新建 custom_delegate.dart 文件,接下来实现该文件代码。这个类需要继承Flutter自带的 SearchDelegate ,然后必须包含四个方法的实现逻辑,代码如下:
    import 'package:flutter/material.dart';/// 搜索框class SearchPageDelegate extends SearchDelegate {@overrideList buildActions(BuildContext context) {  }@overrideWidget buildLeading(BuildContext context) {  }@overrideWidget buildResults(BuildContext context) {  }@overrideWidget buildSuggestions(BuildContext context) {  }}
    buildActions 为右侧的图标按钮,一般我们可以显示一个清除搜索框内容的功能,我们可以使用如下代码来实现:
    return [  IconButton(    tooltip: 'Clear',    icon: const Icon(Icons.clear),    onPressed: () {      query = '';      showSuggestions(context);    },  )];
    buildLeading 为左侧的按钮一般来触发返回操作,代码实现如下:
    @overrideWidget buildLeading(BuildContext context) {return IconButton(tooltip: 'Back',icon: AnimatedIcon(icon: AnimatedIcons.menu_arrow,progress: transitionAnimation,),onPressed: () {close(context, null);},);}
    关闭当前页面使用 close(context, null) 即可实现。buildResults 为搜索结果显示列表,buildSuggestions 为搜索提示列表,在这里我们返回一个空 ListView() 就行。在上面基础上,我们需要修改默认的搜索框的提示,并且需要匹配当前主题的颜色字体等,需要做以下两部分逻辑。
    /// 修改提示框内容String get searchFieldLabel => '用户、帖子';@overrideThemeData appBarTheme(BuildContext context) {final ThemeData theme = Theme.of(context);return theme.copyWith(inputDecorationTheme: InputDecorationTheme(),primaryColor: theme.primaryColor,primaryIconTheme: theme.primaryIconTheme,primaryColorBrightness: theme.primaryColorBrightness,primaryTextTheme: theme.primaryTextTheme);}

    End

    总结本文主要介绍了控件 Scaffold 的一些基础用法,着重介绍了其中三个比较常用的属性 bottomNavigationBar、appBar 和 drawer,同时使用这些属性完成了顶部导航栏、底部导航栏、侧边导航栏和搜索功能的实现。
    展开全文
  • Flutter相关视频教程已经开始陆续上线啦~可能是你看过的最良心的教程哦!无聊的编码--Flutter教程​www.bilibili.comFlutter绘制Tabbar​www.bilibili.comFlutter绘制知乎界面​www.bilibili.comFlutter自出生的那一...
  • flutter搜索框

    千次阅读 2019-06-06 15:28:19
    import 'package:flutter/material.dart'; class SearchBarDemo extends StatefulWidget { @override _SearchBarDemoState createState() => _SearchBarDemoState(); } class _SearchBarDemoState extends .....
  • Flutter实现实时搜索框

    2020-08-25 17:42:58
    Flutter实现实时搜索框效果图 最近学习了点flutter,练习下,实现一个普通的实时搜索功能,有些细节还未完善,大体写完了如下: 版本号: IDE: idea 2019 效果图 项目地址
  • import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; const Color _textColor = Colors.black; const TextStyle _textStyle = TextStyle(fontSize: 15.0,color: _textColor); const...
  • import 'package:flutter/material.dart'; import 'package:keduo/base/baseSize.dart'; import 'package:keduo/utils/icon_utils.dart'; class SearchBarWidget extends StatefulWidget { final ValueChanged<...
  • 各位同学大家好,有段时间没有给大家更新文章了,趁着有时间就写了一个模仿搜索引擎做的一个flutter版本的模糊搜索框案例,分享给大家,如果有错误和纰漏地方希望大家及时指出,那么废话不多说,我们正式开始 ...
  • Flutter自定义搜索框,解决字体不剧中的问题 效果 高度为40的时候显示: 高度为60显示的 高度为30的显示 代码如下, 创建一个SearchBar.dart文件,吧下面的代码复制进去就可以了 import 'package:flutter/...
  • Flutter - 导航栏搜索框实现

    千次阅读 2020-05-07 17:41:40
    demo 地址: https://github.com/iotjin/jh_flutter_demo 效果图: 代码 import 'package:flutter/material.dart'; import 'package:jh_flutter_demo/configs/...import 'package:jh_flutter_demo/JhTools/JhFo...
  • flutter学习--搜索框

    千次阅读 2019-05-26 15:13:03
    主入口文件 继承StatelessWidget,然后在home属性中加入SearchBarDemo,这是一个...import 'package:flutter/material.dart'; import 'search_bar_demo.dart'; void main() =>runApp(MyApp()); class MyApp ext...
  • Flutter中SearchDelegate修改搜索框hintText内容

    千次阅读 热门讨论 2019-10-29 17:43:45
    调用Flutter自带的SearchDelegate,发现搜索框里面自带了水印文字“Search”,但是老板肯定要求要改啊!!! 文章目录查看search.dart源码解决方法 查看search.dart源码 Flutter自带的有SearchDelegate委托,从源码...
  • 2)首先在Android Studio中点击File按钮,然后点击Settings按钮,点击Plugins,然后在右边点击查询“Flutter”,然后点击install,安装flutter插件 ... 4)此时已经可以在file的New的New Flutter Project里新建...
  • 搜索flutter并安装,重启studio。 2、File-&amp;amp;amp;amp;gt;New Flutter Project 3、next到下面的界面,点击链接 4、点击箭头处链接 5、点击箭头处下载flutterSDK压缩包 6、解压压
  • 搜索功能 建造和安装 您可以按照以下说明构建Plebeian,并将其安装到设备上: 安装Flutter。 如果您不知道如何操作,请参阅指南。 克隆此存储库。 输入克隆后创建的目录,然后运行以下命令: flutter packages ...
  • flutter 之顶部搜索栏SearchDelegate

    千次阅读 2020-07-13 11:26:34
    搜索栏是大部分APP都包括的组件,实际开发中需要这个搜索栏,网上... /*这个方法返回一个控件列表,显示为搜索框右边的图标按钮,这里设置为一个清除按钮,并且在搜索内容为空的时候显示建议搜索内容,使用的是showSugge
  • Newznab Indexer搜索 NZBHydra2 陶陶利 局域网唤醒 LunaSea甚至还支持使用配置文件的多个应用程序实例,将配置备份和还原到文件系统,AMOLED黑色主题等等! 请注意,LunaSea纯粹是一个远程控制应用程序,如果没有...
  • 作者:腾讯NOW直播 - narutosun (孙帅) 前言 Flutter是Google使用...腾讯Now直播App中使用Flutter实现了动态搜索列表页。本文主要介绍动态搜索列表页实现相关步骤,总体来看主要分为UI,数据解析和数据通信三个部...
  • WanAndroid-Flutter项目 :fire: :fire: :fire:项目基于Flutter移动应用框架,采用Dart语言编写,打造新的WanAndroid,持续更新(♡˙♡).... 如果项目对你有帮助,留下个star再走叭(๑•。 •๑) 下载体验 密码...
  • 跳转到白屏搜索页面方法 1、在回调函数中设置方法 showSearch(context: context, delegate: 搜索页面的类()); 2、创建搜索页面的类 (1)继承SearchDelegate ... 页面搜索框右上角显示内...
  • 它是使用Dart在Google Flutter Framework之上构建的。 Prism可为您直接向您的Android设备提供独家壁纸和设置。 无限的下载量和收藏夹,可以确保您不会错过最佳的壁纸和设置。 我们的主要目标是创造一种难以想象...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 122
精华内容 48
关键字:

flutter搜索框