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 = [];
  final listWidget = [];

  @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在下面按钮点击跳转功能而已

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

你可能感兴趣的:(Flutter SingleChildScrollView包裹Column点击跳转滚动)