如何在小程序导航栏放一个搜索框？

Posted 2023-05-17

如何在小程序头部放一个搜索框？
现在情况是，在导航栏放了一个input，显示出来了，但是无法聚焦，也无法输入。
看别的小程序截图里，导航栏是有带搜索图标的输入框的，请问具体是怎么做呀？网上转了一大圈也没看到有用的信息。

search.wxml部分内容：
<view class='search_box page_row'>
<view class='search'>
<view class='search_item'>
<icon class='search_icon' size='20' type='search'></icon>
<input value='' placeholder='搜索您要找的商品' bindinput='bindInput'/>
</view>
</view>
<view class='search_btn' bindtap='search'>搜索</view>
</view>
search.wxss样式部分：

.search_boxwidth:100%;background:#2587f1;padding:0 0 10px;display: flex;flex-direction: row
.searchwidth: calc( 100% - 64rpx );
.search_itemborder: 1px solid #d0d0d0;border-radius: 10rpx;margin-left: 20rpx;background:#fff;
.search_item inputmargin-left: 60rpx;height: 60rpx;border-radius: 5px;background:#fff;
.search_btnwidth: 15%;height: 60rpx;line-height:60rpx;text-align: center;background:transparent;color:#fff;
.search_iconmargin: 10rpx 10rpx 10rpx 10rpx;position: absolute;left:25rpx;z-index: 2;width: 20px;height: 20px;text-align: center; 参考技术A 微信小程序——自定义导航栏

在小部件构建期间如何在颤动中导航？

【中文标题】在小部件构建期间如何在颤动中导航？

【英文标题】：How to navigate in flutter during widget build?

【发布时间】：2020-05-05 07:54:27

【问题描述】：

我正在尝试检测该用户不再经过身份验证并将用户重定向到登录。我就是这样做的

  Widget build(BuildContext context) 
    return FutureBuilder(
        future: _getData(context),
        builder: (context, snapshot) 
          try 
            if (snapshot.hasError && _isAuthenticationError(snapshot.error)) 
                Navigator.push(context, MaterialPageRoute(builder: (context) => LoginView()));
            

不幸的是，在构建时进行导航不起作用。它抛出这个错误

flutter: setState() or markNeedsBuild() called during build.
flutter: This Overlay widget cannot be marked as needing to build because the framework is already in the
flutter: process of building widgets.  A widget can be marked as needing to be built during the build 

我不能只返回 LoginView 小部件，因为父小部件包含应用栏和浮动按钮，并且登录视图需要在没有这些控件的情况下显示。我需要导航。

有可能吗？

【问题讨论】：

用户如何登录？是火力基地吗？

【参考方案1】：

将其包裹在Future.microtask 中。这将安排它在下一个异步任务周期发生（即在build 完成之后）。

Future.microtask(() => Navigator.push(
  context, 
  MaterialPageRoute(builder: (context) => LoginView())
));

【讨论】：

但是在这种情况下，我有一个无限循环。有没有其他方法可以做到这一点？

@Valaryo Future.microtask 只触发一次，所以如果你做得对，循环是不可能的。我可以想象这导致无限循环的唯一方法是，如果您使用它来导航到您已经在的页面并且加载页面是触发导航的原因。还可能存在一个问题，如果您在 build 方法期间尝试导航并且小部件正在重建多次，那么您将在第一个导航已经触发后继续排队。 （这就是为什么在 build 方法中做非 UI 的东西通常是个坏主意。）

是的，显然我确实做错了。我现在对此非常确定。我刚刚开始使用 Flutter。我已经尝试了所有可能的方法来实现这一点，但我要么遇到与 SetState 相关的错误，要么遇到与此相关的错误，或者与 MediaQuery 相关的错误。简而言之，我有一个包含三个组件的包装器：页眉、页脚和 viewWrapper（带有页面视图）。在这里你是对的。我正在滚动页面，我的最后一页是一个登录小部件，但到达它后我想退出 pageView 模式（我有页脚和页眉）

然后我尝试重定向到登录页面以使其全屏并有点静态。但是我的登录不在登录页面上，但我已经尝试放入内部页脚和***包装器。

我使用Provider来观察状态。您对我如何解决它有任何想法吗？

【参考方案2】：

flutter 中的流

通常的做法是使用发生用户更改的流程。 当用户注销时，他会检测到该更改并可以将其定向到另一个窗口。

【参考方案3】：

这里有问题：

snapshot.hasError && _isAuthenticationError(snapshot.error)

而不是这个使用 OR

snapshot.hasError || _isAuthenticationError(snapshot.error)