Flutter 布局 3 列宽 3 行深，下方有图标和文本 - 图标 OnPressed（不是导航栏而是全屏）

Question

Flutter 新手和自学。尝试了多种方法，但没有找到“最佳选择”。

见截图。我需要制作类似于此模型的东西。

需要 3 或 4 宽的图标和多行向下，图标和文本在下方居中。图标需要 OnPressed 或其他可操作代码才能导航到另一个 screen/view。文本不一定需要可点击。

我希望得到一些关于从哪里开始的指导。一些链接或代码示例会很棒，但我真的想知道我是否走在正确的轨道上，并找到了创建类似屏幕的最佳解决方案。

提前致谢。

import 'package:welakaone/drawer/drawer.dart';
import 'package:welakaone/drawer/end_drawer.dart';
import 'package:welakaone/logic/custom_colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
//import 'package:welakaone/navigation/route.dart' as route;

class DirectoryScreen extends StatefulWidget {
  @override
  _DirectoryScreenState createState() => _DirectoryScreenState();
}

class _DirectoryScreenState extends State<DirectoryScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        backgroundColor: CustomColors.welakaoneBlack,
        title: AppBarTitle(),
        leading: Builder(
          builder: (context) {
            return IconButton(
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              icon: Icon(Icons.menu),
            );
          },
        ),
        actions: <Widget>[
          Builder(
            builder: (context) {
              return IconButton(
                onPressed: () {
                  Scaffold.of(context).openEndDrawer();
                },
                icon: Icon(Icons.person),
              );
            },
          ),
        ],
      ),
      drawer: new MyDrawer(),
      endDrawer: new MyEndDrawer(
        uid: '',
      ),
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                CustomColors.welakaoneBlack,
                CustomColors.welakaoneBlueDark,
              ],
              begin: FractionalOffset(0.0, 0.0),
              end: FractionalOffset(1.6, 1.0),
              stops: [0.3, 1.0],
              tileMode: TileMode.clamp,
            ),
          ),
          child: RaisedButton(
            color: Colors.transparent,
            padding: EdgeInsets.all(8.0),
            onPressed: () {},
            // child: Container(
            //   height: 100,
            //   width: 200,
            //   child: Column(
            //     mainAxisSize: MainAxisSize.max,
            //     children: <Widget>[
            //       Padding(
            //         padding: const EdgeInsets.all(4.0),
            //         child: Icon(
            //           Icons.camera,
            //           color: Colors.white,
            //         ),
            //       ),
            //       Padding(
            //         padding: const EdgeInsets.all(2.0),
            //         child: Text(
            //           "Capture from Camera",
            //           style: TextStyle(
            //             color: Colors.yellow,
            //             fontWeight: FontWeight.bold,
            //           ),
            //         ),
            //       ),
            //     ],
            //   ),
            // ),
          ),
        ),
      ),
    );
  }
}

Answer 1

让我们将您的问题分解为两个较小的问题

创建 3 列宽 3 行 SomeWidget
为上述布局创建一个可点击的小部件。

解决方案：

第一个问题：Flutter 有一个专门的小部件来布局网格状结构，称为 GridView。使用它在该页面上创建 3x3 网格。

第二个问题：使用 Column 小部件显示图标和下方的文本。然后，通过用 InkWell or GestureDetector

包裹该列使整个内容可点击

Answer 2

在研究了 HasilT 提供的解决方案后，我想出了这段适合我的代码。可能有一种“更短”的方式可以到达我想去的地方，但这段代码可以完成工作！谢谢 HasilT...今天多亏了你，我学到了一些东西。

接下来我将添加 InkWell 的代码。

import 'package:welakaone/appbar/app_bar_title.dart';
import 'package:welakaone/drawer/drawer.dart';
import 'package:welakaone/drawer/end_drawer.dart';
import 'package:welakaone/logic/custom_colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
//import 'package:welakaone/navigation/route.dart' as route;

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        backgroundColor: CustomColors.welakaoneBlack,
        title: AppBarTitle(),
        leading: Builder(
          builder: (context) {
            return IconButton(
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              icon: Icon(Icons.menu),
            );
          },
        ),
        actions: <Widget>[
          Builder(
            builder: (context) {
              return IconButton(
                onPressed: () {
                  Scaffold.of(context).openEndDrawer();
                },
                icon: Icon(Icons.person),
              );
            },
          ),
        ],
      ),
      drawer: new MyDrawer(),
      endDrawer: new MyEndDrawer(
        uid: '',
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              CustomColors.welakaoneBlack,
              CustomColors.welakaoneBlueDark,
            ],
            begin: FractionalOffset(0.0, 0.0),
            end: FractionalOffset(1.6, 1.0),
            stops: [0.3, 1.0],
            tileMode: TileMode.clamp,
          ),
        ),
        child: GridView.count(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          primary: false,
          padding: const EdgeInsets.all(20),
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          crossAxisCount: 3,
          children: <Widget>[
            InkWell(
              child: Column(
                children: [
                  Container(
                    child: Icon(
                      Icons.home,
                      size: 80,
                      color: Colors.white,
                    ),
                  ),
                  Container(
                    child: Text(
                      'TEST 1',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            InkWell(
              child: Column(
                children: [
                  Container(
                    child: Icon(
                      Icons.lock,
                      size: 80,
                      color: Colors.white,
                    ),
                  ),
                  Container(
                    child: Text(
                      'TEST 2',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            InkWell(
              child: Column(
                children: [
                  Container(
                    child: Icon(
                      Icons.login,
                      size: 80,
                      color: Colors.white,
                    ),
                  ),
                  Container(
                    child: Text(
                      'TEST 3',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            InkWell(
              child: Column(
                children: [
                  Container(
                    child: Icon(
                      Icons.person,
                      size: 80,
                      color: Colors.white,
                    ),
                  ),
                  Container(
                    child: Text(
                      'TEST 4',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            InkWell(
              child: Column(
                children: [
                  Container(
                    child: Icon(
                      Icons.door_back_door,
                      size: 80,
                      color: Colors.white,
                    ),
                  ),
                  Container(
                    child: Text(
                      'TEST 5',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            InkWell(
              child: Column(
                children: [
                  Container(
                    child: Icon(
                      Icons.place,
                      size: 80,
                      color: Colors.white,
                    ),
                  ),
                  Container(
                    child: Text(
                      'TEST 6',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter 布局 3 列宽 3 行深，下方有图标和文本 - 图标 OnPressed（不是导航栏而是全屏）

Flutter Layout 3 Columns Wide 3 Rows Deep with Icon and Text Below - Icons OnPressed (Not Navbar but Full Screen)

flutter

layout

navigation

icons

clickable