如何解决Flutter Text小部件
我有一个简单的屏幕,其中包含三个文本小部件,当用户单击其中一个文本小部件时,该文本应变为黑色字体文本颜色,而其他文本小部件颜色应保持不变。因此,我在下面以及如何提供代码我可以在我的代码上实现,以便仅单击的文本会更改颜色。
Main.Dart文件
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() {
runApp(myApp());
}
class myApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,title: "Demo",theme: ThemeData(primarySwatch: Colors.blue),home: HomeData(),);
}
}
class HomeData extends StatefulWidget {
@override
_HomeDataState createState() => _HomeDataState();
}
class _HomeDataState extends State<HomeData> {
Color _textColor1 = Colors.black;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Demo",style: TextStyle(color: Colors.white),),body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,children: [
Padding(
padding: EdgeInsets.all(0),child: InkWell(
onTap: () {
filterText();
setState(() {
_textColor1 = Colors.black;
});
},child: Text(
"All",style: TextStyle(
color: Colors.black26,fontSize: 20,Padding(
padding: EdgeInsets.symmetric(horizontal: 10),child: Text(
"|",style: TextStyle(
color: Colors.black,fontWeight: FontWeight.bold,Padding(
padding: EdgeInsets.all(0),child: InkWell(
onTap: () {
filterText();
},child: Text(
"QR Codes",child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),child: Text(
"|",style: TextStyle(
color: Colors.black,child: Text(
"Bar Codes",],);
}
void filterText() {
String filterAllText = "All";
setState(() {
Fluttertoast.showToast(
msg: "$filterAllText",toastLength: Toast.LENGTH_SHORT,gravity: ToastGravity.BOTTOM,backgroundColor: Colors.blue,textColor: Colors.white,fontSize: 14.0);
});
}
}
解决方法
您可以尝试下面的代码:
class _HomeDataState extends State<HomeData> {
Color _textColor1 = Colors.black;
Color _textColor2 = Colors.black26;
bool _isCheckedAll = true;
bool _isCheckedQr = false;
bool _isCheckedBar = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Demo",style: TextStyle(color: Colors.white),),body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,children: [
Padding(
padding: EdgeInsets.all(0),child: InkWell(
onTap: () {
setState(() {
_isCheckedAll = true;
_isCheckedQr = false;
_isCheckedBar = false;
});
},child: Text(
"All",style: TextStyle(
color: _isCheckedAll ? _textColor1 : _textColor2,fontSize: 20,Padding(
padding: EdgeInsets.symmetric(horizontal: 10),child: Text(
"|",style: TextStyle(
color: Colors.black,fontWeight: FontWeight.bold,Padding(
padding: EdgeInsets.all(0),child: InkWell(
onTap: () {
setState(() {
_isCheckedAll = false;
_isCheckedQr = true;
_isCheckedBar = false;
});
},child: Text(
"QR Codes",style: TextStyle(
color: _isCheckedQr ? _textColor1 : _textColor2,child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),child: Text(
"|",style: TextStyle(
color: Colors.black,child: InkWell(
onTap: () {
setState(() {
_isCheckedAll = false;
_isCheckedQr = false;
_isCheckedBar = true;
});
},child: Text(
"Bar Codes",style: TextStyle(
color: _isCheckedBar ? _textColor1 : _textColor2,],);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。