点击按钮滚动列表视图答案

【问题标题】：Scroll List view on the tap of the Button点击按钮滚动列表视图
【发布时间】：2021-03-09 07:15:50
【问题描述】：

我想通过点击按钮滚动列表视图。

如何在列表视图构建器中获得此类功能。

注意：该列表来自 API，因此长度可能会发生变化。

Here is Image

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

在下面查看您需要的工作示例。

class WidgetTest extends StatefulWidget {
  @override
  _WidgetTestState createState() => _WidgetTestState();
}

class _WidgetTestState extends State<WidgetTest> {
  final ScrollController _scrollController = ScrollController();

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  _scrollToTheNextItemView(
      {ScrollDirection scrollDirection = ScrollDirection.forward}) async {
    if (scrollDirection == ScrollDirection.forward) {
      if (_scrollController.position.pixels <
              _scrollController.position.maxScrollExtent &&
          !_scrollController.position.outOfRange) {
        await _scrollController.animateTo(
            _scrollController.position.pixels + 100,
            duration: const Duration(milliseconds: 500),
            curve: Curves.easeOut);
      }
    } else {
      if (_scrollController.position.pixels >
              _scrollController.position.minScrollExtent &&
          !_scrollController.position.outOfRange) {
        await _scrollController.animateTo(
            _scrollController.position.pixels - 100,
            duration: const Duration(milliseconds: 500),
            curve: Curves.easeOut);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Button Scroll"),
        actions: [
          IconButton(
              icon: Icon(Icons.arrow_back_ios),
              onPressed: () => _scrollToTheNextItemView(
                  scrollDirection: ScrollDirection.backward)),
          IconButton(
              icon: Icon(Icons.arrow_forward_ios),
              onPressed: _scrollToTheNextItemView)
        ],
      ),
      body: Center(
        child: Container(
          height: 120,
          child: ListView(
            scrollDirection: Axis.horizontal,
            controller: _scrollController,
            shrinkWrap: true,
            children: List.generate(
                20,
                (_) => Container(
                    margin: EdgeInsets.only(right: 14),
                    color: Colors.blue,
                    height: 100,
                    width: 100)),
          ),
        ),
      ),
    );
  }
}

enum ScrollDirection { forward, backward }

【讨论】：

【解决方案2】：

检查这个样本就像蛋糕一样简单

用户界面；

body: Center(
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(),
                Row(
                  children: <Widget>[
                    FlatButton(onPressed: () => scrollToLeft(), child: Icon(Icons.chevron_left)),
                    FlatButton(onPressed: () => scrollToRight(), child: Icon(Icons.keyboard_arrow_right)),
                  ],
                ),
              ],
            ),
            Container(
              height: 80,
              child: ListView.builder(
                controller: _controller,
                  scrollDirection: Axis.horizontal,
                  itemCount: listLength,
                  shrinkWrap: true,
                  itemBuilder: ((ctx, i) {
                    return Container(
                      color: Colors.teal ,
                      width: _width,
                      child: Card(child: Center(child: Text("Item $i"))),
                    );
                  })),
            ),
          ],
        ),

函数；

  scrollToRight(){
    if(scrollWidth <= _controller.offset){
      setState(() {
        scrollWidth = _width * baseScrollPoint * move;
        move++;
      });
      _controller.animateTo(scrollWidth, duration: Duration(seconds: 2), curve: Curves.fastOutSlowIn);
    }
  }

  scrollToLeft(){
    if(scrollWidth > 0){
      setState(() {
        move--;
        scrollWidth = scrollWidth - (baseScrollPoint* _width);
      });
      _controller.animateTo(scrollWidth, duration: Duration(seconds: 2), curve: Curves.fastOutSlowIn);
    }
  }

变量；

  ScrollController _controller = ScrollController();
  final double _width = 50.0; // single item length
  final listLength = 20;
  final int baseScrollPoint = 3; // every click will move this much 
  double scrollWidth = 0.0;
  int move = 1;

【讨论】：