3

Cupertino ウィジェットとスライバーを使用して検索バーを作成しようとしています。現在、私は次の構造を持っています：

CupertinoApp
  CupertinoTabScaffold
    CupertinoPageScaffold
      CustomScrollView
        SliverNavigationBar
        SliverPersistentHeader
          _SliverSearchBarDelegate
            CupertinoTextField

SliverPersistentHeader にはデリゲートがあり、次の方法で実装されます。

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 イベントが原因で発生すると考えていましたが、CustomScrollView に ScrollController を追加しても結果は得られませんでした (テキスト フィールドのフォーカス中にスクロール イベントは発生しませんでした)。

また、問題はシミュレーターでのみ発生すると考えていましたが、実際のデバイスでは動作は同じです。

問題のビデオデモは次のとおりです。

ビデオデモンストレーション

更新: Raja Jain のおかげで、問題はスライバーやCategoriesScreenウィジェット自体ではなく、CupertinoTabScaffoldこのウィジェットがラップされていることがわかりました。のホームウィジェットを削除してウィジェットに直接CupertinoTabScaffold設定すると、問題はなくなります。これが私のここです、それが役立つことを願っていますが、特別なことは何もないので方法がわかりません:CupertinoAppCategoriesScreenmain.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();
        },
      ),
    );
  }
}
4

2 に答える 2