Flutter如何在TextField获得焦点时停止CustomScrollView的滚动?

4

我在CustomScrollView中使用TextField遇到了问题。

我的应用程序中有一个CustomScrollView,包含SliverAppBar和SliverList。在SliverAppBar中,我放置了TextField。当我聚焦TextField时,SliverList会自动滚动到顶部位置,然后我添加属性showCursor: false,它停止滚动但我想显示光标而不滚动。如何实现这一点。非常感谢!

这是我的代码:

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(),
      body: SafeArea(
          child: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            leading: Container(),
            floating: true,
            pinned: false,
            snap: true,
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(20.0),
              child: Container(),
            ), // Add this code
            flexibleSpace: Container(
              padding: EdgeInsets.all(10),
              height: 340,
              width: double.infinity,
              child: Stack(
                children: <Widget>[
                  Positioned.fill(
                      child: Container(
                    color: Colors.white,
                  )),
                  Center(
                    child: TextField(
                      autofocus: false,
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        contentPadding: EdgeInsets.only(left: 8.0),
                        hintText: "Search",
                        hintStyle: TextStyle(fontSize: 20),
                      ),
                      showCursor: true, //not show cursor
                    ),
                  ),
                ],
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                    color: Colors.blue[(index + 1) * 50], height: 150.0);
              },
              childCount: 10,
            ),
          ),
        ],
      )),
    );
  }
}

2
在此处打开问题 https://github.com/flutter/flutter/issues/25507 - chunhunghan
1个回答

0

评论中提到的问题应该通过此PR来修复,该PR似乎首次出现在Flutter 1.22.0版本中。

我尝试了你的示例,但仍然有相同的行为。

enter image description here

我尝试将pinned设置为true,它正在工作。

SliverAppBar(
            leading: Container(),
            floating: true,
            pinned: true,
            snap: true,
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(20.0),
              child: Container(),
            ), // Add this code

enter image description here

另外,发现这篇GitHub帖子也有同样的问题。如果您不想将pinned属性设置为true,您可以查看此评论中提出的解决方法。

重复问题请参考#25507。解决此问题的方法是禁用implicitScrolling


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接