如何让我的子项目根据脚手架上的剩余区域调整大小？

Question

我正在尝试在 Flutter 上完成我的毕业项目，但在安装小部件方面遇到了困难。

目前我的屏幕看起来像这样

您可以从屏幕截图中看到元素中有溢出。

但是当我使用支架上的一个小部件时，它看起来像这样。

所以我发现最后没有足够的空间。

所以我需要根据脚手架上的剩余大小调整元素的大小。我的 GridView 代码在这里

import "package:flutter/material.dart";

class RestaurantGridLayout extends StatefulWidget {
  const RestaurantGridLayout({super.key});

  @override
  State<RestaurantGridLayout> createState() => _RestaurantGridLayout();
}

class _RestaurantGridLayout extends State<RestaurantGridLayout> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Center(
        child: GridView.builder(
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 12.0,
                mainAxisSpacing: 12.0,
                mainAxisExtent: 250),
            itemCount: 10,
            itemBuilder: (_, index) {
              return Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    color: Colors.white),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Image.asset(
                        "assets/kofteci.png",
                        fit: BoxFit.cover,
                      ),
                      Text(
                        "Title",
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.bold),
                      ),
                      const SizedBox(
                        height: 8,
                      ),
                      Text("Description")
                    ]),
              );
            }),
      ),
    );
  }
}

我如何修改此代码以适合主屏幕。请注意，我的 GridView 必须可水平滚动。

Answer 1

也许这可以帮助你，记住做事没有单一的方法，只有适合你和不适合你的方法。

问题：

可能的解决方案：

代码：

class RestaurantGridLayout extends StatefulWidget {
  const RestaurantGridLayout({super.key});

  @override
  State<RestaurantGridLayout> createState() => _RestaurantGridLayout();
}

class _RestaurantGridLayout extends State<RestaurantGridLayout> {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 12.0,
          mainAxisSpacing: 12.0,
          mainAxisExtent: 210,
        ),
        itemCount: 10,
        itemBuilder: (_, index) => const CardService());
  }
}

class CardService extends StatelessWidget {
  const CardService({super.key});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.zero,
        child: Flex(
            direction: Axis.vertical,
            children:[

              Expanded(
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  image: const DecorationImage(
                    image: AssetImage('images/jhonacode_logo.jpg'),
                    fit: BoxFit.cover
                  )
                ),
                ),
            ),

              /// Or just use this.
              /*
              Expanded(
                child: Image.asset(
                  width: double.infinity,
                  'images/jhonacode_logo.jpg',
                  fit:BoxFit.cover,
                  alignment: Alignment.topCenter,
                ),

              ),
              */

            const SizedBox(
              height: 60,
              child: ListTile(
                contentPadding: EdgeInsets.zero,
                dense: true,
                title:  Text("Title", style: TextStyle(fontSize: 14),),
                subtitle: Text("Subtitle XXXXXXXX XX XXXXXX XXXXXXXX XXXXXXXXXX XXXXXXXXXXXXXX",maxLines: 2, overflow: TextOverflow.clip,style: TextStyle(fontSize: 12))

              ),
            ),

              /// Or if you like.

              /*

              const Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("Title", style: TextStyle(fontSize: 14),),
                  Text("Subtitle XXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXX",maxLines: 2, overflow: TextOverflow.clip,style: TextStyle(fontSize: 12)),


               */

          ]
        )
    );
  }
}

您可以轻松使用这个小部件。

Container(
   height: 370,
   child: RestaurantGridLayout(),
),

我希望这能让您大致了解如何实现它，或根据您的需要对其进行修改。