flutter - 在颤动中摆脱列表上方的额外空间

Question

问题：正如您从底部的图片中看到的那样，网格布局上方有一些我不想要的额外空白。我尝试将容器内的对齐方式调整为 centerTop，但这并没有改变任何东西。我认为问题与 Container 和 Gridview 位于 Expanded 小部件内有关。不知道如何去删除那个空白。该橙色来自向下滚动事件，以显示空白的位置。任何帮助将非常感激！谢谢你。

代码：

class MyFavorites extends StatefulWidget {
  MyFavorites();

  _MyFavorites createState() => _MyFavorites();
}

class _MyFavorites extends State<MyFavorites> {
  final FavController fC = Get.put(FavController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: colorPalette.chooseColor('offWhite'),
      body: Column(
        children: [
          Spacer(flex: 1),
          Expanded(
            flex: 2,
            child: Row(
              children: [
                Container(
                  alignment: Alignment.centerLeft,
                  child: IconButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    icon: Icon(Icons.chevron_left),
                    color: colorPalette.chooseColor('darkGrey'),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: 23),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'My Favorites',
                    style: GoogleFonts.ubuntuCondensed(
                        color: colorPalette.chooseColor('darkGrey'),
                        fontSize: 32,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 12,
            child: Container(
              child: GridView.count(
                crossAxisCount: 2,
                children: List.generate(fC.favItemNamesList.length, (index) {
                  return Container(
                    child: Card(
                      child: Column(
                        children: [
                          Expanded(
                            flex: 3,
                            child: Stack(
                              fit: StackFit.expand,
                              children: [
                                Image.asset(
                                  'assets/images/empty_image.jpg',
                                  fit: BoxFit.fill,
                                ),
                              ],
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: Container(
                              color: colorPalette.chooseColor('offWhite'),
                              child: Row(
                                children: [
                                  Expanded(
                                    flex: 1,
                                    child: Container(
                                        alignment: Alignment.center,
                                        child: IconButton(
                                          icon: Icon(
                                            Icons.add,
                                            color: colorPalette
                                                .chooseColor('purple'),
                                          ),
                                          onPressed: () {},
                                        )),
                                  ),
                                  Expanded(
                                    flex: 1,
                                    child: Container(
                                        alignment: Alignment.center,
                                        child: IconButton(
                                          icon: Icon(
                                            Icons.edit,
                                            color: colorPalette
                                                .chooseColor('green'),
                                          ),
                                          onPressed: () {},
                                        )),
                                  ),
                                  Expanded(
                                    flex: 1,
                                    child: Container(
                                        alignment: Alignment.center,
                                        child: IconButton(
                                          icon: Icon(
                                            Icons.favorite,
                                            color: Colors.pink,
                                          ),
                                          onPressed: () {},
                                        )),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: Container(
                              color: colorPalette.chooseColor('darkGrey'),
                              padding: EdgeInsets.only(left: 8),
                              alignment: Alignment.centerLeft,
                              child: Obx(
                                () => Text(fC.favItemNamesList[index],
                                    style: GoogleFonts.ubuntuCondensed(
                                        color: colorPalette
                                            .chooseColor('offWhite'),
                                        fontSize: 13)),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                }),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

问题图片：

标签： flutterflutter-layout

Answer 1

只需执行以下操作：

• 删除第一个垫片，除非您需要上述空间，否则不需要它。但是，如果您想要的话，您可以使用 SafeArea Widget 自动避开屏幕上所有看不见的地方。
• 删除包装网格视图的容器

您的代码应如下所示：

class MyFavorites extends StatefulWidget {
  MyFavorites();

  _MyFavorites createState() => _MyFavorites();
}

class _MyFavorites extends State<MyFavorites> {
  final FavController fC = Get.put(FavController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: colorPalette.chooseColor('offWhite'),
      body: Column(
        children: [
          Expanded(
            flex: 2,
            child: Row(
              children: [
                Container(
                  alignment: Alignment.centerLeft,
                  child: IconButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    icon: Icon(Icons.chevron_left),
                    color: colorPalette.chooseColor('darkGrey'),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(left: 23),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    'My Favorites',
                    style: GoogleFonts.ubuntuCondensed(
                        color: colorPalette.chooseColor('darkGrey'),
                        fontSize: 32,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 12,
            child: GridView.count(
                crossAxisCount: 2,
                children: List.generate(fC.favItemNamesList.length, (index) {
                  return Container(
                    child: Card(
                      child: Column(
                        children: [
                          Expanded(
                            flex: 3,
                            child: Stack(
                              fit: StackFit.expand,
                              children: [
                                Image.asset(
                                  'assets/images/empty_image.jpg',
                                  fit: BoxFit.fill,
                                ),
                              ],
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: Container(
                              color: colorPalette.chooseColor('offWhite'),
                              child: Row(
                                children: [
                                  Expanded(
                                    flex: 1,
                                    child: Container(
                                        alignment: Alignment.center,
                                        child: IconButton(
                                          icon: Icon(
                                            Icons.add,
                                            color: colorPalette
                                                .chooseColor('purple'),
                                          ),
                                          onPressed: () {},
                                        )),
                                  ),
                                  Expanded(
                                    flex: 1,
                                    child: Container(
                                        alignment: Alignment.center,
                                        child: IconButton(
                                          icon: Icon(
                                            Icons.edit,
                                            color: colorPalette
                                                .chooseColor('green'),
                                          ),
                                          onPressed: () {},
                                        )),
                                  ),
                                  Expanded(
                                    flex: 1,
                                    child: Container(
                                        alignment: Alignment.center,
                                        child: IconButton(
                                          icon: Icon(
                                            Icons.favorite,
                                            color: Colors.pink,
                                          ),
                                          onPressed: () {},
                                        )),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: Container(
                              color: colorPalette.chooseColor('darkGrey'),
                              padding: EdgeInsets.only(left: 8),
                              alignment: Alignment.centerLeft,
                              child: Obx(
                                () => Text(fC.favItemNamesList[index],
                                    style: GoogleFonts.ubuntuCondensed(
                                        color: colorPalette
                                            .chooseColor('offWhite'),
                                        fontSize: 13)),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                }),
            ),
          ),
        ],
      ),
    );
  }
}