flutter:用GlobalKey作为锚点跳转到指定widget

一，代码

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class MyviewDemo extends StatefulWidget {
  @override
  State<MyviewDemo> createState() => _MyviewDemoState();
}

class _MyviewDemoState extends State<MyviewDemo> with TickerProviderStateMixin {
  int currentIndex = 0;
  final ScrollController _tabController = ScrollController();
  final ScrollController _contentController = ScrollController();

  GlobalKey _targetKeyOrange = GlobalKey();
  GlobalKey _targetKeyRed = GlobalKey();
  GlobalKey _targetKeyYellow = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("历史记录")),
        body: Column(
            children: [
        //显示菜单的container,显示标签
        Container(
        margin: EdgeInsets.only(top: 10),
      height: 80,
      child: SingleChildScrollView(
          controller: _tabController,
          scrollDirection: Axis.horizontal,
          child:Row(
            children: <Widget>[
              SizedBox(width: 20),
              tabText("推荐", 0),
              SizedBox(width: 50),
              tabText("武汉", 1),
              SizedBox(width: 50),
              tabText("导购", 2),
            ],
          )
      ),
    ),
    //显示内容的container,显示主要内容
    Container(
      height: 500,
      child: SingleChildScrollView(
          controller: _contentController,
          scrollDirection: Axis.vertical,
          child:Column(
            children: <Widget>[
              Container(
                key: _targetKeyOrange,
                height: 300,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.orange, // 设置背景色
                ),
                child: Text('橙色区'),
              ),
              Container(
                key: _targetKeyRed,
                height: 400,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.red, // 设置背景色
                ),
                child: Text('红色区'),
              ),
              Container(
                key: _targetKeyYellow,
                height: 200,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.yellow, // 设置背景色
                ),
                child: Text('黄色区'),
              ),
            ],
          )
      ),
    ),
  ],
        ),
    );
  }

  
  /// 导航栏文本样式定义
  RichText tabText(String text1, int index) {
    return RichText(
      text:TextSpan(
          text: text1,
          style: TextStyle(color: currentIndex == index ? Colors.black : Colors.grey,
              fontSize: currentIndex == index ? 40 : 30),
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              setState(() {
                currentIndex = index; // 修改状态并触发 UI 更新
              });
              if (index == 0) {
                Scrollable.ensureVisible(_targetKeyOrange.currentContext as BuildContext);
              } else if (index == 1) {
                 //跳到红色区
                Scrollable.ensureVisible(_targetKeyRed.currentContext as BuildContext);
              } else if (index == 2) {
                 //跳到黄色区
                Scrollable.ensureVisible(_targetKeyYellow.currentContext as BuildContext);
              }
            }),
    );
  }
}

 

二，测试效果: