Question

我在2列中有4张图像，当我单击一个图像时，其样式应像颜色一样更改，阴影应更改，或者该图像应替换为其他图像。单击该图像后，其他图像应保持不变。它应该像单选按钮一样工作。怎么做？请帮助我，谢谢。

final img_rowi= Center(child:
new Container(
  color:   Colors.transparent,

  padding: const EdgeInsets.all(5.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Padding(padding: const EdgeInsets.all(3.0),child: Stack(

        alignment: Alignment.center,
        children: <Widget>[
          svgIcon,new GestureDetector(
            onTap: (){
              setState(() {
                pressed = !pressed;
              });

            },
            child:
          Container(

            child: new Column(
              children: <Widget>[
                new Container(

                  child: new Image.asset(
                    'images/sheep_female.png',
                    height: 50.0,
                    fit: BoxFit.cover,
                  ),
                ),
                new Container(
                  child: new Text('Sheep',style: pressed
                      ? TextStyle(color: const Color(0xFFCDCDCD),fontFamily: 'Montserrat',
                   )
                      : TextStyle(color:Colors.black,fontFamily: 'Montserrat',
                   ),),
                ),
              ],
            ),
            ),
          ),
        ],
      ),),

      Padding(padding: const EdgeInsets.all(3.0),child:
      Stack(
        alignment: Alignment.center,
        children: <Widget>[
          svgIcon,new GestureDetector(
            onTap: (){
              setState(() {
                pressed1 = !pressed1;
              });

            },
            child:
          Container(
            child: new Column(
              children: <Widget>[
                new Container(
                  child: new Image.asset(
                    'images/biily_doe.png',
                    height: 50.0,
                    fit: BoxFit.cover,
                  ),
                ),
                new Container(
                  child: new Text('Billy Doe',style: pressed1
                      ? TextStyle(color: const Color(0xFFCDCDCD),fontFamily: 'Montserrat',
                  )
                      : TextStyle(color:Colors.black,fontFamily: 'Montserrat',
                  ),),
                ),
              ],
            ),
            ),
          ),
        ],
      ),),

    ],
  ),
),

);

Answer 1

将Image的初始属性存储在变量中。例如，如果我想将FlutterLogo小部件的初始颜色设置为Colors.blue，则在类中声明一个状态。然后使用GestureDetector小部件包装您的图片，并设置onTap属性。现在调用setState方法并更改其中的所有变量（Image的属性）。

下面是一个示例，其中有一个FlutterLogo小部件，其中我已将该小部件的初始颜色设置为Colors.blue，而当我点击它时，FlutterLogo小部件的颜色为更改为Colors.green。如果再次点击它，并且颜色为Colors.green，那么它将颜色更改为Colors.yellow，依此类推。您可以对图片执行类似的操作，并更改其大小，可见性和其他属性。

还有imagePath变量存储初始资产的路径，当用户在Image.asset中点击第二个小部件（Column）时，变量imagePath的值将更改，再次调用build方法并替换图片。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool visibility;
  Color colorOfFlutterLogo = Colors.blue;
  String imagePath1 = "assets/initial-path-of-image-1";
  String imagePath2 = "assets/initial-path-of-image-2";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black,
        ),
        body: Column(
          children: <Widget>[
            GestureDetector(
              onTap: () => setState(() {
                    if (colorOfFlutterLogo == Colors.blue)
                      colorOfFlutterLogo = Colors.green;
                    else if (colorOfFlutterLogo == Colors.green)
                      colorOfFlutterLogo = Colors.yellow;
                    else if (colorOfFlutterLogo == Colors.yellow)
                      colorOfFlutterLogo = Colors.blue;
                  }),
              child: FlutterLogo(
                size: double.infinity,
                colors: colorOfFlutterLogo,
              ),
            ),

            // Image 1
            GestureDetector(
              onTap: () => setState(() {
                    imagePath2 = "assets/new-path-for-image-2";
                  }),
              child: Image.asset(imagePath1),
            ),

            // Image 2
            GestureDetector(
              onTap: () => setState(() {
                    imagePath1 = "assets/new-path-for-image-1";
                  }),
              child: Image.asset(imagePath2),
            )
          ],
        ));
  }
}

单击图像，图像样式应更改或图像应抖动更改

1 个答案: