Question

我正在为应用程序使用simple coverflow插件。每个容器都可以水平滚动，并具有一个标题，其中有3个选项，Card。

问题是当我选择任何一个卡片选择时，它也在列表中的其他卡片上选择了相同的选项，如下所示：

从上面可以看到，当我从第一个容器中选择卡片＃1时，最左边和最右边的卡片以绿色显示所选的卡片选项。

我需要怎么做才能使我能够从中心卡中选择一个不会突出显示/在其他卡上选择相同选项的选项？

以下代码：

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
            body: new CoverFlow(
              dismissedCallback: disposeDismissed,
              currentItemChangedCallback: (int index) {
                print(index);
              },
              height: 600,
              itemCount: d.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  child: Card(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(30)),
                    child: Column(children: <Widget>[
                      Padding(
                        padding: EdgeInsets.symmetric(vertical: 25.0),
                        child: Text(
                          "Test",
                          style: TextStyle(
                              fontSize: 20.0, fontWeight: FontWeight.bold),
                        ),),
                      Container(
                          height: 50.0,
                          child: GestureDetector(
                            child: Card(
                                color: _c
                                    ? Colors.lightGreen
                                    : Colors.white,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(20.0)),
                                margin: EdgeInsets.symmetric(
                                    horizontal: 10, vertical: 6),
                                child: Center(
                                    child: Text("1",
                                        style: TextStyle(
                                            fontSize: 18.0),
                                        textAlign: TextAlign.center))
                            ),
                            onTap: () {
                              setState(() {
                                _s = true;
                                _c = true;
                                _w = false;
                                _wr = false;
                              });
                            },)),
                      Container(
                          height: 50.0,
                          child: GestureDetector(
                            child: Card(
                                color:
                                    _w ? Colors.redAccent : Colors.white,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(20.0)),
                                margin: EdgeInsets.symmetric(
                                    horizontal: 10, vertical: 6),
                                child: Center(
                                    child: Text(
                                  "2",
                                  style: TextStyle(
                                      fontSize: 18.0),
                                  textAlign: TextAlign.center,
                                ))),
                            onTap: () {
                              setState(() {
                                _s = false;
                                _c = false;
                                _w = true;
                                _wr = false;
                              });
                            },
                          )),
                      Container(
                          height: 50.0,
                          child: GestureDetector(
                            child: Card(
                                color: _wr
                                    ? Colors.redAccent
                                    : Colors.white,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(20.0)),
                                margin: EdgeInsets.symmetric(
                                    horizontal: 10, vertical: 6),
                                child: Center(
                                  child: Text(
                                    "3",
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        fontSize: 18.0),
                                  ),)),
                            onTap: () {
                              setState(() {
                                _s = false;
                                _c = false;
                                _w = false;
                                _wr = true;
                              });
                            },
                          )),
                      Padding(
                        padding: EdgeInsets.only(top: 25.0),
                      )
                    ]
                    ),
                  ),
                );
              },
            ));}

  Widget widgetBuilder(int i) {
    if (d.length == 0) {
      return Container();
    } else {
      print([i % d.length]);
      return d[i % d.length];
    }}
  disposeDismissed(int dismissedItem, DismissDirection direction) {
    d.removeAt(dismissedItem % d.length);
  }
}

Answer 1

我认为您的3张卡使用相同的状态，因此_c var对于所有3张卡都是相同的。

您可以创建一个新的StatefulWidget来构建卡（并在其中包含自己的_c变量），也可以使用数组（List或Map ）由您的实际小部件中的index中的CoverFlow索引。

选项1：

class CustomCard extends StatefulWidget {
  @override
  _CustomCardState createState() => _CustomCardState();
}

class _CustomCardState extends State<CustomCard> {
  // Initialise here or in `initState()` method.
  bool _s = false;
  bool _c = false;
  bool _w = false;
  bool _wr = false;

  @override
  Widget build(BuildContext context) {
    return Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
        child: Column(children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 25.0),
            child: Text(
              "Test",
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
            ),
          ),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color: _c ? Colors.lightGreen : Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                        child: Text("1",
                            style: TextStyle(fontSize: 18.0),
                            textAlign: TextAlign.center))),
                onTap: () {
                  setState(() {
                    _s = true;
                    _c = true;
                    _w = false;
                    _wr = false;
                  });
                },
              )),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color: _w ? Colors.redAccent : Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                        child: Text(
                      "2",
                      style: TextStyle(fontSize: 18.0),
                      textAlign: TextAlign.center,
                    ))),
                onTap: () {
                  setState(() {
                    _s = false;
                    _c = false;
                    _w = true;
                    _wr = false;
                  });
                },
              )),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color: _wr ? Colors.redAccent : Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                      child: Text(
                        "3",
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 18.0),
                      ),
                    )),
                onTap: () {
                  setState(() {
                    _s = false;
                    _c = false;
                    _w = false;
                    _wr = true;
                  });
                },
              )),
          Padding(
            padding: EdgeInsets.only(top: 25.0),
          )
        ]));
  }
}

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new CoverFlow(
        dismissedCallback: disposeDismissed,
        currentItemChangedCallback: (int index) {
          print(index);
        },
        height: 600,
        itemCount: d.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: CustomCard()
          );
        },
      ));}

  Widget widgetBuilder(int i) {
    if (d.length == 0) {
      return Container();
    } else {
      print([i % d.length]);
      return d[i % d.length];
    }}
  disposeDismissed(int dismissedItem, DismissDirection direction) {
    d.removeAt(dismissedItem % d.length);
  }

您可以在CustomCard小部件中添加选项。

选项2：

为您的数据创建一个类：

class MyData {
  bool s = false;
  bool c = false;
  bool w = false;
  bool wr = false;
}

创建一个列表来存储您的数据（在您所在的州）：

  List<MyData> _cardsData;

  @override
  initState() {
    super.initState();
    _cardsData = List.generate(d.length, (index) => MyData());
  }

使用列表：

// ...
onTap: () {
  setState(() {
    _cardsData[index].c = true;
  })
}
// ...

Answer 2

您只需要指定索引和currentIndex，此代码即可：

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

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

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

class _MyAppState extends State<MyApp> {
  int curerntIndex = 0;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new CoverFlow(
      dismissedCallback: disposeDismissed,
      currentItemChangedCallback: (int index) {
        print(index);
        setState(() {
          curerntIndex = index;
        });
      },
      height: 600,
      itemCount: d.length,
      itemBuilder: (BuildContext context, int index) {
        return Item(index, curerntIndex);
      },
    ));
  }
}

class Item extends StatefulWidget {
  final int index;
  final int curerntIndex;
  Item(this.index, this.curerntIndex);

  @override
  _ItemState createState() => _ItemState(index, curerntIndex);
}

class _ItemState extends State<Item> {
  final int index;
  final int curerntIndex;

  bool _s = true;
  bool _c = true;
  bool _w = false;
  bool _wr = false;

  _ItemState(this.index, this.curerntIndex);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
        child: Column(children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 25.0),
            child: Text(
              "Test",
              style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
            ),
          ),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color: _c ? Colors.lightGreen : Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                        child: Text("1",
                            style: TextStyle(fontSize: 18.0),
                            textAlign: TextAlign.center))),
                onTap: () {
                  if (index == curerntIndex) {
                    setState(() {
                      _s = true;
                      _c = true;
                      _w = false;
                      _wr = false;
                    });
                  }
                },
              )),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color: _w ? Colors.redAccent : Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                        child: Text(
                      "2",
                      style: TextStyle(fontSize: 18.0),
                      textAlign: TextAlign.center,
                    ))),
                onTap: () {
                  if (index == curerntIndex) {
                    setState(() {
                      _s = false;
                      _c = false;
                      _w = true;
                      _wr = false;
                    });
                  }
                },
              )),
          Container(
              height: 50.0,
              child: GestureDetector(
                child: Card(
                    color: _wr ? Colors.redAccent : Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)),
                    margin: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                    child: Center(
                      child: Text(
                        "3",
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 18.0),
                      ),
                    )),
                onTap: () {
                  if (index == curerntIndex) {
                    setState(() {
                      _s = false;
                      _c = false;
                      _w = false;
                      _wr = true;
                    });
                  }
                },
              )),
          Padding(
            padding: EdgeInsets.only(top: 25.0),
          )
        ]),
      ),
    );
  }
}

Answer 3

不是，您不是使用_c将颜色更改为绿色的颜色的人，所以它在所有颜色中都发生了变化，但实际上您只选择了一个。例如在flutter中，您不必键入new即可创建新的手势检测器因此，如果您只想更改已点击的单元格的颜色，请按照从currentItemChangedCallback：（int索引）获得的索引进行更改，或者仅更改已点击的窗口小部件的颜色。

选择一张卡就是在水平列表中选择其他卡

3 个答案: