首页 > 解决方案 > Is there a way to stop CustomScrollView from automatically scrolling down when Keyboard is activated?

问题描述

It seems that whenever I focus on a TextField (that sits inside a SliverPersistentHeader) SliverList+SliverPersistentHeader scrolls down. I have created some mockups of what I mean below: enter image description here

So in this mockup, the user starts off at the first layout, scrolls up to continue viewing the lsit and then when they click on the TextField, the whole thing shifts down. Any way to stop that?

I have also attached my basic Scaffold code for your perusal:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Consts.coMainBackground,
      resizeToAvoidBottomInset: false,
      body: CustomScrollView(
        slivers: <Widget>[
          _sliverAppBar(),
          _makeHeader(),
          BlocBuilder<AllPersonsBloc, AllPersonsState>(
            builder: (context, state) {
              if (state is AllPersonsLoading) {
                return _buildLoading();
              } else if (state is AllPersonsLoaded) {
                return _sliverList(context, state.persons);
              } else if (state is AllPersonsError) {
                return _buildErrorMessage(state.message);
              } else {
                return _buildErrorMessage('Unknown error!');
              }
            },
          ),
        ],
      ),
    );
  }

the _makeHeader creates the SliverPersistentHeader and the rest I think should make sense based on names.

Your help would greatly appreciated :)

Thanks!

标签: android-layoutflutterdartflutter-layout

解决方案


Got it...

return SliverAppBar(
      automaticallyImplyLeading: false,
      backgroundColor: Consts.coForestGreenBackground,
      expandedHeight: 207,
      titleSpacing: 0,
      elevation: 0,
      floating: false,
      pinned: false,
      snap: false,
      flexibleSpace: FlexibleSpaceBar(

Note that the item is not pinned/floated/snapped. Then its important that the input (TextField in this case) has a scrollPadding (top) of 0.

Your scaffold will ALSO need an appbar. So technically you have an appbar and a SliverAppBar but the SliverAppBar is just to wrap the flexibleSpace.

Or rather, zero after any padding on the element it self. In my case its 40 since the TextField has a top padding of 30 and another 10 from the element that contains it etc.


推荐阅读