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,],);
  }
}