我正在尝试使用 Cupertino 小部件和 slivers 创建搜索栏。 目前我有以下结构:

CupertinoApp
  CupertinoTabScaffold
    CupertinoPageScaffold
      CustomScrollView
        SliverNavigationBar
        SliverPersistentHeader
          _SliverSearchBarDelegate
            CupertinoTextField

SliverPersistentHeader 有delegate，具体实现方式如下:

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;
  }
}

屏幕小部件如下所示:

class CategoriesScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: CustomScrollView(
        slivers: <Widget>[
          CupertinoSliverNavigationBar( /* ... */ ),
          SliverPersistentHeader(
            delegate: _SliverSearchBarDelegate(
              child: Container(
                /* ... */
                child: CupertinoTextField( /* ... */ ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

问题是，当我专注于文本字段时，看起来键盘试图显示但随后立即隐藏。我在想这种行为是由于 ScrollView 事件而出现的，但是将 ScrollController 添加到 CustomScrollView 并没有给我任何结果(聚焦文本字段时没有滚动事件)。

我还认为问题只出现在模拟器中，但在真实设备上行为是相同的。

这是问题的视频演示:

更新:感谢Raja Jain我发现问题不在条子或 CategoriesScreen 小部件本身，而是在包装此小部件的 CupertinoTabScaffold 中。如果我删除 CupertinoTabScaffold 并将 CupertinoApp 的主页小部件直接设置为 CategoriesScreen 小部件，问题就会消失。这是我的 main.dart，希望它能有所帮助，但我不知道如何，因为它没有什么特别之处:

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      /* ... */
      // home: CategoriesScreen(),
      home: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          /* ... */
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.all, size: 20.0),
              title: Text('Items'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.categories, size: 20.0),
              title: Text('Categories'),
            )
          ],
        ),
        tabBuilder: (BuildContext tabBuilderContext, int index) {
          return CategoriesScreen();
        },
      ),
    );
  }
}

最佳答案

我复制了你的代码并尝试运行。代码运行良好，符合预期的行为，也许你在点击文本字段时正在某处重建你的小部件。我附上了我试过并且工作正常的代码。

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;
  }
}

关于dart - 当文本字段放置在条子中时键盘无法正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54179088/