首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在颤动中滚动时固定SliverAppBar中的TextField?

在滚动时固定SliverAppBar中的TextField,可以通过使用NestedScrollView和SliverPersistentHeader来实现。

首先,将整个页面的主体包裹在NestedScrollView中,这样可以实现滚动效果。然后,在SliverAppBar的bottom属性中添加一个SliverPersistentHeader,将TextField放置在其中。

下面是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              pinned: true,
              expandedHeight: 200,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('Scrolling TextField'),
              ),
              bottom: PreferredSize(
                preferredSize: Size.fromHeight(48),
                child: SliverPersistentHeader(
                  delegate: _TextFieldDelegate(),
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('Item $index'),
                ),
                childCount: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _TextFieldDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.white,
      child: TextField(
        decoration: InputDecoration(
          hintText: 'Enter text',
          contentPadding: EdgeInsets.all(16),
        ),
      ),
    );
  }

  @override
  double get maxExtent => 48;

  @override
  double get minExtent => 48;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

在这个示例中,我们使用CustomScrollView作为页面的主体,其中包含了一个SliverAppBar和一个SliverList。在SliverAppBar中,我们设置pinned为true,使其在滚动时保持固定。然后,我们使用SliverPersistentHeader作为SliverAppBar的bottom属性,将TextField放置在其中。

这样,当页面滚动时,SliverAppBar会保持固定,而TextField会随着滚动而滚动。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

腾讯云云服务器(CVM)是一种可弹性伸缩的云计算服务,提供高性能、可靠稳定的云服务器实例,适用于各种应用场景。

腾讯云对象存储(COS)是一种安全、低成本、高可靠的云端存储服务,适用于存储和处理各种类型的数据,包括图片、音视频、文档等。

更多关于腾讯云云服务器(CVM)的信息,请访问:腾讯云云服务器(CVM)产品介绍

更多关于腾讯云对象存储(COS)的信息,请访问:腾讯云对象存储(COS)产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券