Dart 当文本字段放置在条子中时,键盘未正确显示
我正在尝试使用Cupertino小部件和小部件创建搜索栏。 目前我有以下结构:Dart 当文本字段放置在条子中时,键盘未正确显示,dart,flutter,searchbar,flutter-sliver,Dart,Flutter,Searchbar,Flutter Sliver,我正在尝试使用Cupertino小部件和小部件创建搜索栏。 目前我有以下结构: CupertinoApp CupertinoTabScaffold CupertinoPageScaffold CustomScrollView SliverNavigationBar SliverPersistentHeader _SliverSearchBarDelegate CupertinoTextField
CupertinoApp
CupertinoTabScaffold
CupertinoPageScaffold
CustomScrollView
SliverNavigationBar
SliverPersistentHeader
_SliverSearchBarDelegate
CupertinoTextField
SliverPersistentHeader具有委托,其实现方式如下:
class\u SliverSearchBarDelegate扩展SliverPersistentHeaderDelegate{
_滑动搜索栏闸门({
@需要这个孩子,
此值为0.minHeight=56.0,
此值为0.maxHeight=56.0,
});
最后一个孩子;
最终双倍高度;
最终双倍最大高度;
@凌驾
double get minExtent=>minHeight;
@凌驾
double get maxExtent=>maxHeight;
@凌驾
小部件构建(BuildContext上下文、双收缩偏移、布尔重叠内容){
返回SizedBox.expand(子项:子项);
}
@凌驾
布尔应该重建(\u SliverSearchBarDelegate oldDelegate){
返回maxHeight!=oldDelegate.maxHeight||
最小高度!=oldDelegate.minHeight||
child!=oldDelegate.child;
}
}
屏幕小部件如下所示:
class CategoriesScreen扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回式CupertinoPageScaffold(
子:自定义滚动视图(
条子:[
CupertinoSliverNavigationBar(/*…*/),
滑冰机(
代表:_SliverSearchBarDelegate(
子:容器(
/* ... */
子项:CupertinoTextField(/*…*/),
),
),
)
],
),
);
}
}
问题是,当我在文本字段中聚焦时,看起来键盘试图显示,但随后立即隐藏。我认为出现这种行为是因为scrollview事件,但将ScrollController添加到CustomScrollView并没有给我任何结果(在聚焦文本字段时没有滚动事件)
我还认为问题只出现在模拟器中,但在真实设备上,行为是相同的
以下是问题的视频演示:
更新:多亏了,我发现问题不在于小部件本身,而在于包装该小部件的cupertinobsaffold
。如果我删除cupertinobsaffold
并将CupertinoApp
的主页小部件直接设置为CategoriesScreen
小部件,问题就会消失。这是我的main.dart
,希望能有所帮助,但我不知道怎么做,因为它没有什么特别之处:
void main()=>runApp(App());
类应用程序扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回CupertinoApp(
/* ... */
//主页:分类屏幕(),
住家:库珀蒂诺巴塞弗德(
tabBar:CupertinoTabBar(
/* ... */
项目:[
底部导航气压计(
图标:图标(Icons.all,大小:20.0),
标题:文本(“项目”),
),
底部导航气压计(
图标:图标(图标.类别,大小:20.0),
标题:文本(“类别”),
)
],
),
tabBuilder:(BuildContext tabBuilderContext,int index){
返回分类屏幕();
},
),
);
}
}
我复制了您的代码并尝试运行。代码运行良好,符合预期行为,可能您在单击文本字段时正在某个地方重建小部件。我附加了我尝试过的代码,工作正常
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Test'),
),
body: CupertinoPageScaffold(
child: CustomScrollView(
slivers: <Widget>[
CupertinoSliverNavigationBar(
largeTitle: Text("Demo"),
),
SliverPersistentHeader(
delegate: _SliverSearchBarDelegate(
child: Container(
height: 20.0,
width: 20.0,
child: CupertinoTextField(/* ... */),
),
),
)
],
),
),
);
}
}
class _SliverSearchBarDelegate extends SliverPersistentHeaderDelegate {
_SliverSearchBarDelegate({
@required this.child,
this.minHeight = 56.0,
this.maxHeight = 56.0,
});
final Widget child;
final double minHeight;
final double maxHeight;
@override
double get minExtent => minHeight;
@override
double get maxExtent => maxHeight;
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return SizedBox.expand(child: child);
}
@override
bool shouldRebuild(_SliverSearchBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
import'包装:flift/cupertino.dart';
进口“包装:颤振/材料.省道”;
void main(){
runApp(MyApp());
}
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建(构建上下文){
返回材料PP(
标题:“颤振演示”,
主题:主题数据(
主样本:颜色。蓝色,
),
主页:MyHomePage(),
);
}
}
类MyHomePage扩展了无状态小部件{
@凌驾
@凌驾
小部件构建(构建上下文){
返回脚手架(
appBar:appBar(
标题:常量文本(“测试”),
),
主体:CupertinoPageScaffold(
子:自定义滚动视图(
条子:[
CupertinoSliverNavigationBar(
largeTitle:文本(“演示”),
),
滑冰机(
代表:_SliverSearchBarDelegate(
子:容器(
身高:20.0,
宽度:20.0,
子项:CupertinoTextField(/*…*/),
),
),
)
],
),
),
);
}
}
类_SliverSearchBarDelegate扩展SliverPersistentHeaderDelegate{
_滑动搜索栏闸门({
@需要这个孩子,
此值为0.minHeight=56.0,
此值为0.maxHeight=56.0,
});
最后一个孩子;
最终双倍高度;
最终双倍最大高度;
@凌驾
double get minExtent=>minHeight;
@凌驾
double get maxExtent=>maxHeight;
@凌驾
小部件构建(
BuildContext上下文、双收缩偏移、布尔重叠内容){
返回SizedBox.expand(子项:子项);
}
@凌驾
布尔应该重建(\u SliverSearchBarDelegate oldDelegate){
返回maxHeight!=oldDelegate.maxHeight||
最小高度!=oldDelegate.minHeight||
child!=oldDelegate.child;
}
}
是的,我刚刚复制了你的代码,效果很好。我想我发现了一个问题:我的分类屏幕用在了tabBuilder内部的CupertinoTabScaffold中。当我移除CupertinoAbscaffold并将CupertinoApp的home小部件直接设置为CategoriesScreen时,一切正常。这个问题仍然存在,因为我需要使用cupertinobsaffold。更新问题