Question

我正在尝试制作一个当鼠标光标向上或向下移动时自动滚动的导航。

当我在导航部分或 SingleChildScrollView 上向上移动光标时，它应该向上移动，类似地，当我向下移动光标时，如果你们明白我的意思，它应该向下移动。对不起，我的英语不是很好，我也不是特别擅长解释。

希望你们能帮到我。

这是我的 main.dart 文件：

import 'package:flutter/material.dart';
import 'package:my_portfolio/pages/homepage.dart';

void main() => runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
  home: HomePage(),
));

这是我的 homepage.dart 文件

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:my_portfolio/widgets/nav_llink.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF2C2A2A),
      body: Container(
        padding: EdgeInsets.only(left: 120.0, right: 120.0),
        child: Row(
          children: [
            Spacer(),
            SingleChildScrollView(
              child: Column(
                children: [
                  NavLink(
                    title: "ABOUT",
                    onTap: () {},
                  ),
                  NavLink(
                    title: "-",
                    onTap: () {},
                  ),
                  NavLink(
                    title: "PROJECTS",
                    onTap: () {},
                  ),
                  NavLink(
                    title: "-",
                    onTap: () {},
                  ),
                  NavLink(
                    title: "CONTACT",
                    onTap: () {},
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

最后是链接“按钮”

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

class NavLink extends StatefulWidget {
  final String title;
  final Function onTap;

  Color color = Color(0xFF707070);
  int position;

  NavLink({ @required this.title, @required this.onTap });

  @override
  _NavLinkState createState() => _NavLinkState();
}

class _NavLinkState extends State<NavLink> {
  @override
  Widget build(BuildContext context) {
    return RotatedBox(
      quarterTurns: 1,
      child: Padding(
        padding: EdgeInsets.only(right: 80.0, left: 80.0),
        child: GestureDetector(
          onTap: widget.onTap,
          child: MouseRegion(
            onHover: updateColor,
            onExit: resetColor,
            child: Text(
              widget.title,
              style: TextStyle(
                color: widget.color,
                fontSize: 180.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }

  void updateColor(PointerHoverEvent event) {
    setState(() {
      widget.color = Colors.white;
      widget.position = event.position.dx as int;
    });
  }

  void resetColor(PointerExitEvent event) {
    setState(() {
      widget.color = Color(0xFF707070);
    });
  }

}

在 Flutter Web 中自动滚动 singleChildScrollView

0 个答案: