Flutter SingleChildScrollView包裹Column點擊跳轉(zhuǎn)滾動

也是在看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('跳轉(zhuǎn)')),
        ],
      ),
    );
  }
}

也沒做太多交互,就是隨機生成了Container在下面按鈕點擊跳轉(zhuǎn)功能而已

如果對你有幫助不妨點個贊咯

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容