flutter - 如何在 Flutter 中切换选中的图像？

Question

我尝试了几个教程来创建这样的布局，但它们总是失败。也许有人可以在这里提供帮助

Answer 1

您能详细说明一下吗？据我所知，没有直接的方法可以做到这一点。您需要的是有一个变量 selectedImageIndex 并且每个图像都有 2 个“图像”，一个突出显示，一个不突出显示，然后您可以编写类似

的内容

child: selectedImageIndex == 1? HighlightedImage():NonHighLightedImage 

并且每个图像都将用 Gesture Detector 包裹，这样当您点击它时，selectedImageIndex 会发生变化。但同样，这意味着您拥有图像的两个版本(或者您必须以某种方式手动突出显示它，或者如果它是一个图标，可能会更改图标的颜色。请提供更多详细信息

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selected;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.school),
              color: (selected != null && selected == 0)
                  ? Colors.blue
                  : Colors.grey,
              onPressed: () {
                setState(() {
                  selected = 0;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.school),
              color: (selected != null && selected == 1)
                  ? Colors.blue
                  : Colors.grey,
              onPressed: () {
                setState(() {
                  selected = 1;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}