Question

我已经在import React, { useState } from "react"; import "./styles.css"; export default function App() { const [value, setValue] = useState(0); const continuosIncerment = () => { console.log(`Setting ${value}`); setValue(value + 1); timer = setTimeout(function() { continuosIncerment(); }, 1000); }; function timeoutClear() { clearTimeout(timer); } return ( <div className="App"> <button onMouseLeave={timeoutClear} onMouseUp={timeoutClear} onMouseDown={continuosIncerment} > Increment </button> <div>Value = {value} </div> </div> ); }内创建了TextFields。用户提交时，该值将添加到ListView.builder中。

valueList

我想要做的是，当用户单击“提交”按钮时，我希望滚动条移动到下一个List valueList = []; ListView.builder( itemBuilder: (context, index){ return Padding( padding: const EdgeInsets.all(8.0), child: TextField( keyboardType: TextInputType.number, onSubmitted: (value) { valueList.add(value); print(valueList); }, ), ); }),。有TextField。但是我无法找到如何在FocusNode

中实现它

Answer 1

只要您知道要滚动多远，就可以在controller上使用ListView.builder并设置位置的动画。

final ScrollController scrollcontroller = new Scrollcontroller();
final List valueList = [];

//...

ListView.builder(
  controller: scrollcontroller,

  itemBuilder: (context, index){
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        keyboardType: TextInputType.number,
        onSubmitted: (value) {
          valueList.add(value);

          double height_of_textfield = 20;
          // focus on next input then
          controller.animateTo(index * height_of_textfield, duration: /* some duration */, curve: Curves.easeOutCubic);
        },
      ),
    );
  }),
//...

如果您具有一致的高度，这将很好用，否则您将不得不想出一种方法来计算滚动高度以制作动画...

在flutter中控制listview.builder中textfield的滚动

1 个答案: