如何在颤动中创建适合剩余空间的4个网格

Question

我试图使一个小工具，看起来像下面的设计。我似乎想不出怎样才能让我的东西变大。在安卓系统中，我会使用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)