Flutter SingleChildScrollView包裹Column点击跳转滚动

也是在看Stepper组件源码时候看到这个功能,觉得在某些需求是可以满足需求的,废话不多说直接上代码

import 'dart:math';

import 'package:flutter/material.dart';

class TestPage extends StatelessWidget {
  final rng = new Random();
  final colors = [
    Colors.green,
    Colors.lightBlue,
    Colors.yellow,
    Colors.red,
  ];
  final listKey = <GlobalKey>[];
  final listWidget = <Widget>[];

  @override
  Widget build(BuildContext context) {
    for (int i = 0; i < 100; i++) {
      int data = rng.nextInt(100);
      if (data < 20) {
        data += 20;
      }
      var myKey = GlobalKey();
      listKey.add(myKey);
      listWidget.add(Container(
        key: myKey,
        alignment: Alignment.center,
        width: double.infinity,
        height: data.toDouble(),
        color: colors[i % colors.length],
        child: Text('index=>$i  height=>$data'),
      ));
    }
    return Scaffold(
      appBar: AppBar(
        title: Text('测试滑动'),
      ),
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: listWidget,
              ),
            ),
          ),
          FlatButton(
              onPressed: () {
                Scrollable.ensureVisible(
                  listKey[99].currentContext,
                  curve: Curves.linear,
                  duration: Duration(milliseconds: 1000),
                );
              },
              child: Text('跳转')),
        ],
      ),
    );
  }
}

也没做太多交互,就是随机生成了Container在下面按钮点击跳转功能而已

如果对你有帮助不妨点个赞咯

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容