选择卡片正在选择水平列表中的其他卡片

问题描述 投票:0回答:3

我正在使用simple coverflow插件的应用程序。每个容器都可以水平滚动,并且标题有3个选项Card

enter image description here

问题是当我选择任何卡片选择时,它也会在列表中的其他卡片上选择相同的选项,如下所示:

enter image description here

如您所见,当我从第一个容器中选择卡#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);
  }
}
flutter flutter-layout
3个回答
1
投票

您只需要指定索引和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),
          )
        ]),
      ),
    );
  }
}

2
投票

我认为你的3张牌使用相同的状态,所以你所有3张卡的_c var都是相同的。

你可以创建一个新的StatefulWidget来构建一张牌(并且在其中有自己的_c var),或者你可以在实际的小部件中使用ListMap索引的数组(indexCoverFlow)。

选项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;
  })
}
// ...


0
投票

不,你不是你是那个使用_c改变颜色绿色的人,所以它改变了所有这些但实际上你只选择了一个。在颤动中你不必输入新的来创建新的手势探测器所以如果你想要仅通过从currentItemChangedCallback:(int index)获得的索引来更改被点击的单元格的颜色,或者仅通过更改点击的窗口小部件颜色来更改颜色。

© www.soinside.com 2019 - 2024. All rights reserved.