无法在不溢出的情况下向 GridView 添加边距或填充

Question

我试图简单地向我的 GridView 添加边距或填充。我将 GridView 嵌套在 Flex > Expanded 中。我有这些小部件，因为我想防止手动定位，因为它会导致这些溢出问题。

这是我的代码：

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

  @override
  Widget build(BuildContext context) {

    return Container(
      color: Colors.white,
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: Flex(
        direction: Axis.vertical,
        children: [
          Expanded(
              flex: 2,
              child: Container(
                color: CustomColors.primaryColor,
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(40.0),
                      child: Flex(
                        direction: Axis.horizontal,
                        children: [
                          Expanded(
                            flex: 2,
                            child: Text(
                                "XXXXXXXXXX",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 20,
                                )),
                          ),
                          Expanded(
                            flex: 1,
                            child: Image.asset(
                              'assets/images/fox.png',
                              width: 30,
                            ),
                          ),
                        ],
                      ),
                    ),
                    // Padding(padding: EdgeInsets.all(15.0)),
                    Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: TextField(
                          style: TextStyle(
                            fontSize: 24,
                            color: Colors.black,
                            fontWeight: FontWeight.w600,
                          ),
                          textAlign: TextAlign.center,
                          decoration: InputDecoration(
                            border: UnderlineInputBorder(),
                            enabledBorder: UnderlineInputBorder(
                                borderSide:
                                    BorderSide(color: Colors.grey[400]!),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(50))),
                            focusedBorder: UnderlineInputBorder(
                                borderSide:
                                    BorderSide(color: Colors.grey[600]!),
                                borderRadius: const BorderRadius.all(
                                    Radius.circular(50))),
                            errorBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.red[600]!),
                            ),
                            focusedErrorBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.red[800]!),
                            ),
                            hintStyle: TextStyle(color: Colors.grey[800]),
                            hintText: "What do you need help with?",
                            fillColor: Colors.white,
                            // contentPadding: EdgeInsets.all(15.0),
                            filled: true,
                          )),
                    ),
                  ],
                ),
              )),
          Expanded(
            flex: 1,
            child: Container(
              // constraints: BoxConstraints(maxHeight: 250),
              child: Column(
                children: [
                  Text(
                    "Need help? Check out our most common categories.",
                    style: TextStyle(
                      fontSize: 17,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  GridView.builder(
                      physics: BouncingScrollPhysics(),
                      itemCount: list.length,
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisSpacing: 10,
                              mainAxisSpacing: 10,
                              mainAxisExtent: 50,
                              crossAxisCount: 2),
                      itemBuilder: (context, index) {
                        return ElevatedButton.icon(
                            onPressed: () => {},
                            label: Text(
                              list[index].name,
                              style: TextStyle(color: Colors.white),
                            ),
                            icon: Icon(
                              list[index].icon.icon,
                              color: Colors.white,
                            ),
                            style: ElevatedButton.styleFrom(
                              backgroundColor: list[index].color,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(10.0),
                                // side: BorderSide(
                                //     width: 2,
                                //     color:
                                //         const Color.fromARGB(255, 102, 41, 41)),
                              ),
                            ));
                      }),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

因此，当我尝试将

margin: EdgeInsets.all(15),

或

padding: EdgeInsets.all(15),

添加到包含

Container

的

GridView

时，它会溢出。

如何为该容器添加边距而不导致溢出？

Answer 1

将

GridView.builder

直接包裹在

Expanded

小部件内。

这将确保

GridView

可以在可用空间内调整其大小而不会溢出，并且您可以自由地将

margin

或

padding

应用到周围的

Container

。

固定示例：

Expanded(
  flex: 1,
  child: Container(
    // constraints: BoxConstraints(maxHeight: 250),
    margin: const EdgeInsets.all(15), // You can adjust this as needed
    padding: const EdgeInsets.all(15), // You can adjust this as needed
    child: Column(
      children: [
        const Text(
          "Need help? Check out our most common categories.",
          style: TextStyle(
            fontSize: 17,
            fontWeight: FontWeight.bold,
          ),
        ),
        Expanded( // This is the key to fix the issue
          child: GridView.builder(
            physics: const BouncingScrollPhysics(),
            itemCount: list.length,
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              mainAxisExtent: 50,
              crossAxisCount: 2,
            ),
            itemBuilder: (context, index) => ElevatedButton.icon(
              onPressed: () => {},
              label: Text(
                list[index].name,
                style: const TextStyle(color: Colors.white),
              ),
              icon: Icon(
                list[index].icon.icon,
                color: Colors.white,
              ),
              style: ElevatedButton.styleFrom(
                backgroundColor: list[index].color,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                  // side: BorderSide(
                  //     width: 2,
                  //     color:
                  //         const Color.fromARGB(255, 102, 41, 41)),
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  ),
)