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

Answer 2

请让我知道它是否无效。

int _selectedA = 1, _selectedB = 1;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              _buildCircleA(icon: Icons.bluetooth, selection: 1),
              _buildCircleA(icon: Icons.bluetooth_disabled, selection: 2),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              _buildCircleB(icon: Icons.mail, selection: 1),
              _buildCircleB(icon: Icons.mail_outline, selection: 2),
            ],
          )
        ],
      ),
    ),
  );
}

Widget _buildCircleA({IconData icon, int selection}) {
  return GestureDetector(
    onTap: () => setState(() => _selectedA = selection),
    child: Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(color: _selectedA == selection ? Colors.blue : Colors.transparent, width: 2),
      ),
      child: Icon(icon, size: 56, color: _selectedA == selection ? Colors.blue : null),
    ),
  );
}

Widget _buildCircleB({IconData icon, int selection}) {
  return GestureDetector(
    onTap: () => setState(() => _selectedB = selection),
    child: Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(color: _selectedB == selection ? Colors.blue : Colors.transparent, width: 2),
      ),
      child: Icon(icon, size: 56, color: _selectedB == selection ? Colors.blue : null),
    ),
  );
}

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

2 个答案: