时间戳

首页 > 解决方案 > 单击图像样式应更改或图像应在颤动中更改的图像

dart - 单击图像样式应更改或图像应在颤动中更改的图像

问题描述

我在 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',
                  ),),
                ),
              ],
            ),
            ),
          ),
        ],
      ),),

    ],
  ),
),

);

标签： dartflutter

解决方案

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

下面是一个示例，其中有一个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),
            )
          ],
        ));
  }
}

推荐阅读