如何解决抖动中过多的变量

Question

我正在尝试在Flutter项目中创建一叠纸牌。每张卡包含不同的数据/信息，当我尝试使用虚拟数据进行可视化时，我必须使用很多变量，这几乎是每张卡重复使用的变量名称。有没有办法使可重复使用的卡组件变得扑朔迷离，因此我可以使其变得清晰和简单，因为将来使用真实数据时，我可能会在同一组中拥有2张以上的卡，并且它们还将具有不同的数据。任何建议将不胜感激。

class MyConstructor {


MyConstructor({this.jonathan1,this.jonathan2,this.jonathan3});
}


class StackedCardsState extends State<HomePage> {

  List<MyConstructor> cards = [
    MyConstructor(h1: "Hello", h2: "hello3")
  ];

/////
                  Padding(
                      padding: EdgeInsets.all(15.0),
                      child: Column(children: [
                        Text(MyConstructor.hey, style: TextStyle(fontWeight: FontWeight.bold),),
                        Text(MyConstructor.hey),
                        Text(MyConstructor.hey, style: TextStyle(color: Colors.red[500]),),
                        VerticalDivider(color: Colors.blue),
                      ])),

Answer 1

首先，您的问题很简单，您违反了DRY概念（请不要重复https://en.wikipedia.org/wiki/Don%27t_repeat_yourself。]

开始复制粘贴代码后，请花点时间考虑一下代码，以及如何将其抽象为可重用的组件。

我认为您缺少的另一个大问题是变量命名。这是编写代码的非常非常重要的部分。可能看似微不足道，但很难理解名为cardOne1和cardTwo2的变量的实际含义。该变量的目的是什么？它是做什么的？

现在说我知道您的应用与汽车销售有关，但除此之外，我不确定自己在看什么。在那里，我将很难为该代码找到一个好的变量，但这是一个示例。

因此，我们将卡中的内容分解为单个可重用的小部件，我们还可以创建一个数据类（或模型）来存储然后提供给小部件的数据。

//car_details.dart

class CarDetails {
  String title;
  String diffNumber;
  String diffPercent;
  Color colorIndicator;

  CarDetails({
    this.title,
    this.diffNumber,
    this.diffPercent,
    this.colorIndicator,
  });
}

//car_card_details.dart
class CarCardDetails extends StatelessWidget {
  final double padding;
  final CarDetails carDetails;

  CarCardDetails({
    this.carDetails,
    this.padding = 15,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        carDetails.colorIndicator != null
            ? Container(
                color: carDetails.colorIndicator,
                height: 60,
                width: 2,
              )
            : Container(),
        Padding(
            padding: EdgeInsets.all(padding),
            child: Column(children: [
              Text(carDetails.title),
              Text(carDetails.diffNumber),
              Text(carDetails.diffPercent),
              VerticalDivider(color: Colors.blue),
            ])),
      ],
    );
  }
}

要使用此组件，我们制作一个带有标题和CarDetails列表的CarCard小部件，如下所示：

// car_card.dart
class CarCard extends StatelessWidget {
  final String title;
  final List<CarDetails> carDetails;

  CarCard({this.title, this.carDetails});

  @override
  Widget build(BuildContext context) {
    List<Widget> detailRow = List();

    if (carDetails != null) {
      carDetails.forEach((element) {
        detailRow.add(CarCardDetails(
          top: element.title,
          middle: element.diffNumber,
          bottom: element.diffPercent,
          lineColor: element.colorIndicator,
        ));
      });
    }

    return Container(
      //height: 150, //I would not hardcode the height, let the childrent expand the widget instead
      child: SingleChildScrollView(
        child: Card(
          elevation: 8.0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: InkWell(
            child: Column(children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(children: [
                  Text(
                    title,
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  Spacer(),
                  Icon(Icons.favorite)
                ]),
              ),
              Divider(color: Colors.black),
              Row(children: detailRow),
            ]),
          ),
        ),
      ),
    );
  }
}

而不是保存您在应用程序中拥有的所有变量，我们现在可以将它们放入一个CarDetails列表，其中每个元素都包含字符串。

// some other widget

...

  List<CarDetails> carDetails = [
    CarDetails(
      title: "2 hrs ago",
      diffNumber: "+/ TRACK",
      diffPercent: "% to DBJ",
    ),
    CarDetails(
      title: "CHEVEROLET",
      diffNumber: "-2706",
      diffPercent: "42.2%",
      colorIndicator: Colors.red,
    ),
    CarDetails(
      title: "BUICK",
      diffNumber: "+300",
      diffPercent: "50%",
      colorIndicator: Colors.green,
    ),
    CarDetails(
      title: "GMC",
      diffNumber: "-712",
      diffPercent: "52.1%",
      colorIndicator: Colors.black26,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return CarCard(
        title: "US Daily Retail Delieveries by Brand", 
        carDetails: carDetails,
    );
  }

...

当然，甚至可以进一步将这些信息与卡片组等进行抽象，但是希望您能理解。

这是您如何执行此操作的示例，但我不知道您打算使用什么数据以及如何构造它。因此，请以这为起点，并从那里开始。 ：）