在 Flutter 中的 TextField 上打字时滚动到顶部

Question

我在 SliverPersistentHeaderDelegate 上添加了 TextFormField。滚动到 middle/bottom 并在文本字段中键入内容后，SliverList 会自动出现在顶部。我该如何禁用它？

完整代码。

class MyWidget extends StatelessWidget {
  static const String route = '/myWidget';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            child: CustomScrollView(
              slivers: <Widget>[
                SliverPersistentHeader(
                  pinned: true,
                  delegate: MyDynamicHeader(),
                ),
                SliverList(
                    delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
                      return Container(
                        height: 200,
                        color: Color(Random().nextInt(0xffffffff)),
                      );
                    },
                    )
                )
              ],
            )
        )
    );
  }
}

class MyDynamicHeader extends SliverPersistentHeaderDelegate {
  int index = 0;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return LayoutBuilder(
        builder: (context, constraints) {
          final Color color = Colors.primaries[index];
          final double percentage = (constraints.maxHeight - minExtent)/(maxExtent - minExtent);

          if (++index > Colors.primaries.length-1)
            index = 0;

          return Container(
            decoration: BoxDecoration(
                boxShadow: [BoxShadow(blurRadius: 4.0, color: Colors.black45)],
                gradient: LinearGradient(
                    colors: [Colors.blue, color]
                )
            ),
            height: constraints.maxHeight,
            child: SafeArea(
                child: Center(
                  child: Row(
                    children: <Widget>[
                      CircularProgressIndicator(
                        value: percentage,
                        valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                      ),
                      InkWell(
                        onTap: (){
                          print('is working');
                        },
                        child: Container(
                          height: 50,
                          width: 100,
                          color: Palette.orelPay,
                        ),
                      ),
                      Expanded(child: TextFormField(
                        //controller: searchController,
                        decoration: InputDecoration(
                            contentPadding:
                            EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                            hintText: "Search on OrelBuy",
                            border: OutlineInputBorder(
                                borderSide:
                                BorderSide(color: Palette.background, width: 32.0),
                                borderRadius: BorderRadius.circular(50.0)),
                            fillColor: Palette.background,
                            filled: true,
                            enabledBorder: OutlineInputBorder(
                                borderSide:
                                BorderSide(color: Palette.background, width: 32.0),
                                borderRadius: BorderRadius.circular(50.0)),
                            focusedBorder: OutlineInputBorder(
                                borderSide:
                                BorderSide(color: Palette.background, width: 32.0),
                                borderRadius: BorderRadius.circular(50.0))),
                      ),)
                    ],
                  ),
                )
            ),
          );
        }
    );
  }

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate old) => false;

  @override
  double get maxExtent => 250.0;

  @override
  double get minExtent => 80.0;
}

Answer 1

您可以使用 CustomScrollView 小部件的物理特性来控制滚动。

CustomScrollView(
      physics: PageScrollPhysics(), // added
      slivers: <Widget>[

在 Flutter 中的 TextField 上打字时滚动到顶部

scrolling to the top when typing on TextField on Flutter

dart

flutter

flutter-sliver