如何在颤振中的 GridView.builder() 中添加扩展平铺小部件?

时间:2021-07-28 07:55:54

标签: flutter flutter-layout flutter-web

我正在处理网格视图,但在尝试在网格视图中插入扩展图块时卡住了。我面临的问题是,尝试扩展图块时,出现溢出错误。有没有办法在网格视图中使用扩展磁贴,这样当其中一个磁贴展开时,其他磁贴向下移动而不会导致任何溢出错误?

这是我的代码片段:

 Expanded(
             child: GridView.builder(
                                itemCount: 21,
                                physics: BouncingScrollPhysics(),
                                gridDelegate:
                                    SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisSpacing: 10,
                                  mainAxisSpacing: 10,
                                  childAspectRatio: (1 / 0.46),
                                  crossAxisCount:
                                      (MediaQuery.of(context).orientation ==
                                              Orientation.landscape)
                                          ? 4
                                          : 1,
                                ),
                                itemBuilder:
                                    (BuildContext context, int index) => Card(
                                  elevation: 6.0,
                                  child: ClipRRect(
                                    borderRadius: BorderRadius.circular(10.0),
                                    child: ExpansionTile(
                                      // collapsedBackgroundColor: Colors.white,
                                      // backgroundColor: Colors.white,
                                      trailing: FadeInImage.memoryNetwork(
                                        image:
                                            'https://picsum.photos/250?image=123',
                                        placeholder: kTransparentImage,
                                      ),
                                      title: Container(
                                        child: Text(
                                          'Pencil Pen Test Long String Again Test Long String',
                                        ),
                                      ),

                                      subtitle: Padding(
                                        padding:
                                            const EdgeInsets.only(top: 8.0),
                                        child: Text(
                                          '\u{20B9} $myAmount',
                                          style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      ),
                                      children: <Widget>[
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: <Widget>[
                                              Align(
                                                alignment: Alignment.topLeft,
                                                child: Text('Price 1 :' +
                                                    ' \u{20B9} $myAmount'),
                                              ),
                                              Align(
                                                alignment: Alignment.topLeft,
                                                child: Text('Price 2 :' +
                                                    ' \u{20B9} $myAmount'),
                                              ),
                                              Align(
                                                alignment: Alignment.topLeft,
                                                child: Text('Price 3 :' +
                                                    ' \u{20B9} $myAmount'),
                                              ),
                                              SizedBox(
                                                height: 6.0,
                                              ),
                                              Column(
                                                children: [
                                                  Container(
                                                    padding:
                                                        EdgeInsets.all(20.0),
                                                    child: Align(
                                                      alignment:
                                                          Alignment.centerLeft,
                                                      child: Text(
                                                        'TAGS',
                                                        style: TextStyle(
                                                          color: Colors.white,
                                                          decoration:
                                                              TextDecoration
                                                                  .underline,
                                                        ),
                                                      ),
                                                    ),
                                                  ),
                                                  Row(
                                                    children: [
                                                      Expanded(
                                                        child: InputChip(
                                                          onDeleted: () {},
                                                          onPressed: () {},
                                                          label: Text('Chip a'),
                                                          avatar: Icon(
                                                              Icons.ac_unit),
                                                        ),
                                                      ),
                                                      Expanded(
                                                        child: InputChip(
                                                          onDeleted: () {},
                                                          onPressed: () {},
                                                          label: Text('Chip b'),
                                                          avatar: Icon(Icons
                                                              .e_mobiledata),
                                                        ),
                                                      ),
                                                      Expanded(
                                                        child: InputChip(
                                                          onDeleted: () {},
                                                          onPressed: () {},
                                                          label: Text('Chip c'),
                                                          avatar: Icon(Icons
                                                              .format_align_justify_outlined),
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                ],
                                              ),
                                              Divider(),
                                              Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceBetween,
                                                children: <Widget>[
                                                  Row(
                                                    children: [
                                                      Text(
                                                        'In Hand : ',
                                                        style: TextStyle(
                                                          fontWeight:
                                                              FontWeight.bold,
                                                          color:
                                                              Theme.of(context)
                                                                  .colorScheme
                                                                  .secondary,
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                  Row(
                                                    children: [
                                                      IconButton(
                                                        onPressed: () {
                                                          displayBottomSheetAddInventory(
                                                              context);
                                                        },
                                                        icon: Icon(
                                                            Icons.add_circle),
                                                      ),
                                                      IconButton(
                                                        onPressed: () {
                                                          displayBottomSheetSubtractInventory(
                                                              context);
                                                        },
                                                        icon: Icon(Icons
                                                            .remove_circle),
                                                      ),
                                                      IconButton(
                                                        onPressed: () {
                                                          displayBottomSheetEditInventory(
                                                              context);
                                                        },
                                                        icon: Icon(
                                                          Icons.edit,
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                ],
                                              )
                                            ],
                                          ),
                                        )
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                            ),

这是我得到的:

enter image description here

这是我想要的:(其他瓷砖应该在这个瓷砖下面,并在折叠时重新调整。)

enter image description here

有人可以帮忙吗?

0 个答案:

没有答案