gpt4 book ai didi

Flutter web - 在悬停时如何更改 Flatbutton TEXT 颜色

转载 作者:行者123 更新时间:2023-12-04 12:13:27 27 4
gpt4 key购买 nike

嗨,我在 Flutter web 上工作,当我 悬停 flatbutton 我想改变文字颜色。它在悬停而不是按下。但是我如何检测/知道它被悬停了,所以我可以管理状态颜色。谢谢

FlatButton(
color: Colors.white,
textColor: Colors.teal[700], //when hovered text color change
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
side: BorderSide(
color: Colors.teal[700],
),
),
onPressed: () {},
child: Text("Log in"),
),

最佳答案

您可以在下面复制粘贴运行完整代码
您可以使用 MouseRegiononHover属性
代码片段

void _incrementExit(PointerEvent details) {
setState(() {
textColor = Colors.blue;
_exitCounter++;
});
}

void _updateLocation(PointerEvent details) {
setState(() {
textColor = Colors.red;
x = details.position.dx;
y = details.position.dy;
});
}

return MouseRegion(
onEnter: _incrementEnter,
onHover: _updateLocation,
onExit: _incrementExit,
child: FlatButton(
color: Colors.white,
textColor: Colors.teal[700], //when hovered text color change
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
工作演示
enter image description here
完整代码
import 'package:flutter/material.dart';

import 'package:flutter/widgets.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';

@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: Center(
child: MyStatefulWidget(),
),
),
);
}
}

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

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
Color textColor = Colors.blue;
int _enterCounter = 0;
int _exitCounter = 0;
double x = 0.0;
double y = 0.0;

void _incrementEnter(PointerEvent details) {
setState(() {
_enterCounter++;
});
}

void _incrementExit(PointerEvent details) {
setState(() {
textColor = Colors.blue;
_exitCounter++;
});
}

void _updateLocation(PointerEvent details) {
setState(() {
textColor = Colors.red;
x = details.position.dx;
y = details.position.dy;
});
}


@override
Widget build(BuildContext context) {
return MouseRegion(
onEnter: _incrementEnter,
onHover: _updateLocation,
onExit: _incrementExit,
child: FlatButton(
color: Colors.white,
textColor: Colors.teal[700], //when hovered text color change
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
side: BorderSide(
color: Colors.teal[700],
),
),
onPressed: () {},
child: Text("Log in", style: TextStyle(color: textColor),),
),
);
}
}

关于Flutter web - 在悬停时如何更改 Flatbutton TEXT 颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63371978/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com