如何让 ListView 组件在 TextFieldInput 上向上滚动

Question

2021 年 7 月 15 日更新：

我发现了另一个对我有帮助的类似问题： Programmatically scrolling to the end of a ListView

到目前为止，我可以让它看起来有点像我想要的，但我仍然遇到溢出问题。

这是更新后的代码

home.dart

class _HomePageState extends State<HomePage> {

  // added a scroll controller to control my ListView
  ScrollController scrollController = ScrollController(); 

  void addEntry() {
    setState(() {
      entryTextController.text = '';
      this.newEntry = !this.newEntry;
    });

  // on adding an item, I will scroll up in the ListView
    Timer(
        Duration(milliseconds: 100),
        () =>
        scrollController.jumpTo(scrollController.position.maxScrollExtent)
    );
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: [
            Container(), 

               // instead of just the EntryList, I added a container
               // with a fixed height. I'll probably change this later
               Container(
               height: 500.0,
               child: EntriesList(props)
            )
          
          ],
        ),
        floatingActionButton: FloatingActionButton(onTap: addEntry)
        );
  }
}

EntryList.dart

class _EntriesListState extends State<EntriesList> {
    List<Widget> getEntries(snapshot) {

      myList = entryList.map<Widget>((entry) { 
        return Entry();
      }).toList();

      myList.add(Visibility(                  
          visible: widget.newEntry,
          child: Card(
              child: ListTile(
            title: TextFormField(),
          ))));

     // This is the newest change. By adding a Placeholder, I am able to 
     // bring the screen up on the scrollController bringing this into 
    // position so that the user can then see the TextFormField

      myList.add(Opacity(opacity: 0.0, child: Placeholder()))
    return myList;
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _entryStream,
      builder: (BuildContext context, AsyncSnapshot snapshot) {

        // Async code here ... 

        return ListView(                     
          children: getEntries(snapshot),    
          padding: EdgeInsets.all(8.0),
          shrinkWrap: true,
        );
      },
    );
  }
}

原文：

我正在向我的 ListView 小部件添加一个条目。在我的 ListView 小部件中，我嵌入了一个隐藏的 TextFieldInput，一旦用户单击 addEntry 按钮就会显示。

我的主要问题是，一旦列表变得足够长，我的列表不会向上滚动以允许用户查看他们正在输入的新条目。

这是我当前的代码。为了让我的问题保持简洁，我删除了一些不相关的代码。

main.dart

class _HomePageState extends State<HomePage> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: [
            Container(), // top widget here

            // Scrollable list of dates
            EntriesList(),
          ],
        ),
        floatingActionButton: FloatingActionButton()
        );
  }
}

EntriesList.dart

class _EntriesListState extends State<EntriesList> {
  List<Widget> getEntries(snapshot) {
      
      myList = entryList.map<Widget>((entry) { // getting my entry widgets here
        return Entry();
      }).toList();

      myList.add(Visibility(                  // adding my hidden text input widget here
          visible: widget.newEntry,
          child: Card(
              child: ListTile(
            title: TextFormField(),
          ))));
    return myList;
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _entryStream,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasError) {
          return Text("Something went wrong");
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        }


        return ListView(                     // I added several properties in hopes that it would 
          children: getEntries(snapshot),    // work but to no avail
          padding: EdgeInsets.all(8.0),
          shrinkWrap: true,
          physics:
              BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
        );
      },
    );
  }
}

Answer 1

使用SingleChildScrollView 小部件。可以在HomePage 或EntriesList 中使用，只需用SingleChildScrollView 小部件包装即可。像这样在首页：

class _HomePageState extends State<HomePage> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: [
            Container(), // top widget here

            // Scrollable list of dates
            SingleChildScrollView(child:widgetEntriesList()),
          ],
        ),
        floatingActionButton: FloatingActionButton()
        );
  }
}

或者在 EntriesList 中像这样：

class _EntriesListState extends State<EntriesList> {
  List<Widget> getEntries(snapshot) {
      
      myList = entryList.map<Widget>((entry) { // getting my entry widgets here
        return Entry();
      }).toList();

      myList.add(Visibility(                  // adding my hidden text input widget here
          visible: widget.newEntry,
          child: Card(
              child: ListTile(
            title: TextFormField(),
          ))));
    return myList;
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _entryStream,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasError) {
          return Text("Something went wrong");
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        }


        return SingleChildScrollView(
          child:ListView(                    
            children: getEntries(snapshot),    // work but to no avail
            padding: EdgeInsets.all(8.0),
            shrinkWrap: true,
            physics:BouncingScrollPhysics(),
          )
        );
      },
    );
  }
}

除了包装ListView，您也可以包装StreamBuilder。