Question

我正在建立一个列表（动态地，通过对API的HTTP请求的结果），但是我想在其他元素之前先添加一个“添加”卡。像这样：

我正在与建筑商合作但是我做的方法不好，有问题。

在这里，account.trips是Trip对象的列表，而AddNewTrip是“添加”卡。由于我的if，列表的第一个元素始终不显示

那么，还有另一种方法可以将我的“添加”卡放在列表的第一个元素中，而不隐藏一个元素吗？

return Builder(
  builder: (BuildContext context) {
    if (account.trips.indexOf(i) == 0) {
      return new AddNewTrip(account);
    }
    return Padding(
      padding: const EdgeInsets.only(
         top: 20.0, bottom: 40.0, left: 5.0, right: 5.0),
           child: Stack(
        ...

编辑：这是完整的代码：

Expanded(
          child: ScopedModelDescendant<Account>(
            builder: (context, child, _account){
              print(_account.profile);
              return new CarouselSlider(
                enableInfiniteScroll: false,
                enlargeCenterPage: true,
                height: MediaQuery.of(context).size.height,
                initialPage: 1,
                items: itemBuilder(_account)
              );
            },
          ),
        )

List<Widget> itemBuilder(Account account) {
      if (account.trips != null)
        return account.trips.map((i) {
          return Builder(
            builder: (BuildContext context) {
              if (account.trips.indexOf(i) == 0) {
                return new AddNewTrip(account);
              }
              return Padding(
                padding: const EdgeInsets.only(
                    top: 20.0, bottom: 40.0, left: 5.0, right: 5.0),
                child: Stack(
                  children: <Widget>[
                    Hero(
                      tag: i.id,
                      child: Material(
                        type: MaterialType.transparency,
                        child: InkWell(
                          child: Container(
                            height: 200,
                            margin: EdgeInsets.symmetric(horizontal: 5.0),
                            decoration: cardImage(i.imageUrl),
                          ),
                          borderRadius: BorderRadius.circular(20.0),
                          onTap: () {
                            Navigator.of(context)
                                .push(MaterialPageRoute(builder: (context) {
                              return TripDetails(i);
                            }));
                          },
                        ),
                      ),
                    ),
                    Positioned(
                      width: MediaQuery.of(context).size.width * 0.7,
                      height: MediaQuery.of(context).size.height * 0.48,
                      top: MediaQuery.of(context).size.height * 0.2,
                      left: MediaQuery.of(context).size.width * 0.035,
                      child: Hero(
                        tag: i.id + 'container', //should be an ID
                        child: Material(
                          type: MaterialType.transparency,
                          child: Container(
                            decoration: cardDecoration,
                            child: new TripContent(i, true),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              );
            },
          );
        }).toList();
      else
      return [
        new AddNewTrip(account)
      ];
    }

Answer 1

return account.trips.map((i) {

更改为：

return [[null], account.trips].expand((x) => x).toList().map((i) {

Answer 2

先前的答案已经为如何执行此操作提供了很好的一般建议。对于您的特定示例，您将必须执行以下操作：

环行帐户时，请在结果前添加“添加”卡，如下所示：

List<Widget> itemBuilder(Account account) {
  return [
    new AddNewTrip(account),
    ...(account.trips?.map((i) {/** same as before without your index check **/}) ?? []),
  ];
}

Answer 3

首先建立卡，然后再建立列表的其余部分。

  List<Widget> itemBuilder(Account account) {
   return [
    AddNewTrip(account),
    if (account.trips != null)
     return account.trips.map((i) {
       return Builder(
        builder: (BuildContext context) {
          return Padding(
             //rest of your code
            );
        });
    );
 }];}

Answer 4

您可以在列表中的0th索引处添加一个虚拟列表项，稍后可以执行逻辑。

下面的示例代码可以帮助您：

  var list = ["1","3","4"];
  list.insert(0,"5");

输出：5 1 3 4

列表生成器：如何使第一个元素与众不同？

4 个答案: