Flutter UI - Container Border Margin 界面问题

Question

我一直在尝试在我的电子商务主页上工作，正如您从屏幕截图中看到的那样，我正在尝试修复我的主屏幕中的类别图标位置尽管它在 Android 切换到 iOS 屏幕时似乎很稳定，但它变得不稳定，无法点击。

知道我做错了什么吗？

目标与现实

主屏幕

class _HomeScreenState extends State<HomeScreen> {

  var height = Get.height;
  var width = Get.width;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(4.0),
        child: Column(
          children: [
            Padding(
              padding:
              EdgeInsets.only(top: 40, left: 0, right: 0, bottom: 0),
              child: Column(
                children: [
                  Container(
                    height: 120,
                    width: 365,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.circular(10.0),
                        boxShadow: const [
                          BoxShadow(
                              color: Colors.grey,
                              blurRadius: 2.0,
                              offset: Offset(2.0, 2.0))
                        ]),
                    child: CategoriesGrid(
                      height: height,
                      width: width,
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

类别网格

class CategoriesGrid extends StatelessWidget {
  const CategoriesGrid({
    Key key,
    this.height,
    this.width,
  }) : super(key: key);

  final double height;
  final double width;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height * 0.16,
      width: width,
      color: Colors.transparent,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: width * 0.02),
        child: Center(
          child: GridView.builder(
                  physics: NeverScrollableScrollPhysics(),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 4),
                  itemBuilder: (context, index) => Padding(
                    padding: const EdgeInsets.all(2.0),
                    child: InkWell(
                      child: CategoryWidget(
                        height: height,
                        width: width,
                        onTap: () {
                        },
                      ),
                    ),
                  ),
                  itemCount: 4,
                ),
        ),
      ),
    );
  }
}

Widget CategoryWidget(
    {double height,
    double width,
    Function() onTap}) {
  return InkWell(
    onTap: onTap,
    child: Container(
      height: height * 0.07,
      width: width * 0.1,
      color: Colors.transparent,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            imagePath,
            height: height * 0.05,
          ),
          SizedBox(
            height: height * 0.01,
          ),
          Text(
            '$titleText',
            style: TextStyle(fontSize: 12,
            ),
          ),
        ],
      ),
    ),
  );
}

Answer 1

您可以试试 Flexible - 它控制行、列和 Flex 等基本 flex 小部件的子项如何填充它可用的 space

即

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

Answer 2

已解决，我在调用 CategoriesGrid 之前添加了 Padding 并删除了 Container

这是更新后的代码

主屏幕

                 Container(
                      height: height/8,
                      width: 365,
                      decoration: BoxDecoration(
                                blurRadius: 2.0,
                                offset: Offset(2.0, 2.0))
                          ]),
                      child: Padding(
                        padding:  EdgeInsets.only(top:Get.height/34),
                        child: CategoriesGrid(
                          height: height,
                          width: width,
                          internetAvailable:
                          homePageController.internetAvailable,
                          listOfTitles: homePageController.listOfTitles,
                          listOfCategoryImages:
                          homePageController.listOfCategoryImages,
                        ),
                      ),
                    ),

类别网格

  Widget build(BuildContext context) {
return Padding(
  padding: EdgeInsets.symmetric(horizontal: width * 0.02),
  child: GridView.builder(
    padding: EdgeInsets.zero,
    physics: NeverScrollableScrollPhysics(),
    gridDelegate:
        SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
    itemBuilder: (context, index) => InkWell(
      child: CategoryWidget(
        titleText: listOfTitles[index],
        imagePath: listOfCategoryImages[index],
        onTap: () {
          Get.to(() => OffersList(
                index: index,
              ));
        },
      ),

Flutter UI - Container Border Margin 界面问题

Flutter UI - Container Border Margin interface Issue

user-interface

containers

border

dart

flutter