如何在 Flutter 中制作适合剩余 space 的 4 网格

Question

我正在尝试制作一个类似于以下设计的小部件。我似乎无法弄清楚如何让我的物品增长。在 android 中，我会使用 match_parent。但这是我无法弄清楚它需要如何实现的东西？

这是我得到的：

我的自定义小部件

import 'package:flutter/material.dart';

class HomeTiles extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        child: Column(mainAxisSize: MainAxisSize.max, children: [
          Container(
              child: Row(children: [
                Expanded(
                    child: HomeItem(
                        title: Localization.of(context).homeExercises,
                        icon: Icons.fitness_center,
                        color: ThemeColors.blueColor)),
                Padding(padding: EdgeInsets.only(left: ThemeDimens.padding)),
                Expanded(
                    child: HomeItem(
                        title: Localization.of(context).homeDiet,
                        icon: Icons.restaurant_menu,
                        color: ThemeColors.greenColor))
              ])),
          Padding(padding: EdgeInsets.only(top: ThemeDimens.padding)),
          Container(
              child: Row(
                children: [
                  Expanded(
                      child: HomeItem(
                          title: Localization.of(context).homeTimer,
                          icon: Icons.timer,
                          color: ThemeColors.redColor)),
                  Padding(padding: EdgeInsets.only(left: ThemeDimens.padding)),
                  Expanded(
                      child: HomeItem(
                          title: Localization.of(context).homeMyClub,
                          icon: Icons.home,
                          color: ThemeColors.orangeColor)),
                ],
              ))
        ]));
  }
}

这是 HomeTiles 小部件的父级：

import 'package:balance/page/history_page.dart';
import 'package:balance/page/users_page.dart';
import 'package:balance/widget/general/background.dart';
import 'package:balance/widget/general/bottom_navigation.dart';
import 'package:balance/widget/home/home_tiles.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() {
    return new HomeScreenState();
  }
}

class HomeScreenState extends State<HomeScreen> {
  int _page = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Background(child: _getCorrectPage()),
        bottomNavigationBar: BottomNavigation(onPageSelected: onPageSelected));
  }

  void onPageSelected(int index) {
    setState(() {
      _page = index;
    });
  }

  Widget _getCorrectPage() {
    switch (_page) {
      case 0:
        return HomeTiles();
      case 1:
        return HistoryPage();
      case 2:
        return UsersPage();
    }
    return Container();
  }
}

给定的代码是我现在拥有的。我拍了第一张照片。使用此代码（我对高度值进行了硬编码）所以我知道我的其他小部件 HomeItem 完美运行：

import 'package:flutter/material.dart';

class HomeTiles extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 798,
        child: Column(mainAxisSize: MainAxisSize.max, children: [
          Container(
              height: (798 / 2) - 8,
              child: Row(children: [
                Expanded(
                    child: HomeItem(
                        title: Localization.of(context).homeExercises,
                        icon: Icons.fitness_center,
                        color: ThemeColors.blueColor)),
                Padding(padding: EdgeInsets.only(left: ThemeDimens.padding)),
                Expanded(
                    child: HomeItem(
                        title: Localization.of(context).homeDiet,
                        icon: Icons.restaurant_menu,
                        color: ThemeColors.greenColor))
              ])),
          Padding(padding: EdgeInsets.only(top: ThemeDimens.padding)),
          Container(
              height: (798 / 2) - 8,
              child: Row(
                children: [
                  Expanded(
                      child: HomeItem(
                          title: Localization.of(context).homeTimer,
                          icon: Icons.timer,
                          color: ThemeColors.redColor)),
                  Padding(padding: EdgeInsets.only(left: ThemeDimens.padding)),
                  Expanded(
                      child: HomeItem(
                          title: Localization.of(context).homeMyClub,
                          icon: Icons.home,
                          color: ThemeColors.orangeColor)),
                ],
              ))
        ]));
  }
}

我整天都在网上搜索。而且我没有得到我真正想要的结果。你会怎么做？有解决办法吗？

Answer 1

尝试将您的元素置于 Column 中：

Container(
    color: Colors.white,
    child: Column(
           mainAxisSize: MainAxisSize.max,
           mainAxisAlignment: MainAxisAlignment.center,

并使用 Expanded

扩展 Column 中的每个元素

         children: [
                  Expanded(
                    child: Container(
                        child: Row(children: [
                      Expanded(
                          child: HomeItem(
                          ...

Answer 2

我更愿意使用 Flexible。这是我的 UI 层次结构

  Column(mainAxisSize: MainAxisSize.max)
    Row(mainAxisSize: MainAxisSize.max)
      Flexible(flex: 1)
      Flexible(flex: 1)
    Row(mainAxisSize: MainAxisSize.max)
      Flexible(flex: 1)
      Flexible(flex: 1)

如何在 Flutter 中制作适合剩余 space 的 4 网格

How to make a grid of 4 that fits remaining space in Flutter

flutter

flutter-layout

我的自定义小部件