创建可以具有不同属性的动画容器的动态列表

Question

我正在尝试实现这种一次可点击一个芯片的设计

设计形象

我尝试了多种方法，例如列表视图和网格视图构建器，但没有什么能准确地提供我想要的东西。我最终选择了 Wrap() 小部件，它带有一个用于映射 Animated Container 小部件的列表，它给了我想要的外观，但是当我点击一个芯片时，一切都改变了颜色，而不是像这样。

我如何动态地实现这些芯片网格，一次只有一个芯片改变颜色的属性，并从那里导航到下一页。有关更多上下文，这是我使用的代码，

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:flutter/painting.dart';

import 'package:scree/constants.dart';

class SiteAbooutScreen extends StatefulWidget {
 const SiteAbooutScreen({Key? key}) : super(key: key);

 @override
 _SiteAbooutScreenState createState() => _SiteAbooutScreenState();
}


class _SiteAbooutScreenState extends State<SiteAbooutScreen> {
bool _isTapped = false;
@override Widget build(BuildContext context) {

return Scaffold(
  body: Padding(
    padding: EdgeInsets.only(left: 24, right: 24, top: 74.75),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Wrap(
          spacing: 16,
          runSpacing: 16,
          children: _stuff
              .map(
                (strings) => GestureDetector(
                  onTap: () {
                    setState(() {
                      _isTapped = !_isTapped;
                    });
                  },
                  child: AnimatedContainer(
                    padding:
                        EdgeInsets.symmetric(horizontal: 24, vertical: 10),
                    duration: Duration(milliseconds: 200),
                    decoration: BoxDecoration(
                        color: _isTapped ? primary1 : Colors.transparent,
                        border: Border.all(color: Colors.black54),
                        borderRadius: BorderRadius.circular(100)),
                    child: Text(
                      strings,
                      style: Small.copyWith(
                          fontSize: 14,
                          color:
                              _isTapped ? Colors.white : Color(0xff929292)),
                    ),
                  ),
                ),
              )
              .toList(),
        )
      ],
    ),
  ),
);
 }

  List<String> _stuff = [
'Portfolio',
'Art',
'Marketing',
'Education',
'Blog',
'Travel',
'Fashion',
'Beauty',
'Design',
'Online Store',
'Fitness',
'Food'
 ];
}

Answer 1

发生这种情况是因为您使用单个 bool 来处理每个项目。这就是为什么一切都会同时发生变化的原因。为了一次处理一个，您需要单独检查。

为此，您可以为所选项目创建布尔或字符串列表。

class SiteAbooutScreen extends StatefulWidget {
  const SiteAbooutScreen({Key? key}) : super(key: key);

  @override
  _SiteAbooutScreenState createState() => _SiteAbooutScreenState();
}

class _SiteAbooutScreenState extends State<SiteAbooutScreen> {
  List<String> tappedItems = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.only(left: 24, right: 24, top: 74.75),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Wrap(
              spacing: 16,
              runSpacing: 16,
              children: _stuff
                  .map(
                    (strings) => GestureDetector(
                      onTap: () {
                        setState(() {
                          if (tappedItems.contains(strings)) {
                            tappedItems.remove(strings);
                          } else {
                            tappedItems.add(strings);
                          }
                        });
                      },
                      child: AnimatedContainer(
                        padding:
                            EdgeInsets.symmetric(horizontal: 24, vertical: 10),
                        duration: Duration(milliseconds: 200),
                        decoration: BoxDecoration(
                            color: tappedItems.contains(strings)
                                ? Theme.of(context).primaryColor
                                : Colors.transparent,
                            border: Border.all(color: Colors.black54),
                            borderRadius: BorderRadius.circular(100)),
                        child: Text(
                          strings,
                          style: TextStyle(
                              fontSize: 14,
                              color: tappedItems.contains(strings)
                                  ? Colors.white
                                  : Color(0xff929292)),
                        ),
                      ),
                    ),
                  )
                  .toList(),
            )
          ],
        ),
      ),
    );
  }

  List<String> _stuff = [
    'Portfolio',
    'Art',
    'Marketing',
    'Education',
    'Blog',
    'Travel',
    'Fashion',
    'Beauty',
    'Design',
    'Online Store',
    'Fitness',
    'Food'
  ];
}