如何在一行中的图标下方制作文本并使行从屏幕底部开始（Flutter）

Question

所以我想用 2x3 的东西制作一个图标按钮，屏幕上有 2 行，每行 3 个元素。但是，当我用行实现它时，文本位于图标的右侧，我想将文本放在图标下方

目前有的是这个

Widget build(BuildContext context) {
    return new Scaffold(
      body: Column (children: <Widget>[

        Row(


          //row1
          children: [
            IconButton(
              iconSize: 70.0,
              icon: const Icon(Icons.add_chart, color: Colors.greenAccent),
              tooltip: 'My Learning',
            ),
            Text('My Learning',
                style: TextStyle(color: Colors.orange)
            ),

            IconButton(
              iconSize: 60.0,
              icon: const Icon(Icons.lightbulb_outline, color: Colors.greenAccent),
              tooltip: 'Deep 46',
            ),
            Text('Deep 46',
                style: TextStyle(color: Colors.orange)
            ),
            IconButton(
              iconSize: 60.0,
              icon: const Icon(Icons.flight, color: Colors.greenAccent),
              tooltip: 'unleashed',
            ),
            Text('More Unleashed',
                style: TextStyle(color: Colors.orange)
            ),

          ],
        ),

        Row(
          children: [

            IconButton(
              iconSize: 60.0,
              icon: const Icon(Icons.videogame_asset_outlined, color: Colors.greenAccent),
              tooltip: 'learning game',
            ),
            Text('Learning Game',
                style: TextStyle(color: Colors.orange)
            ),

            IconButton(
              iconSize: 60.0,
              icon: const Icon(Icons.access_time, color: Colors.greenAccent),
              tooltip: 'absen',
            ),
            Text('Absen',
                style: TextStyle(color: Colors.orange)
            ),
            IconButton(
              iconSize: 60.0,
              icon: const Icon(Icons.calendar_today, color: Colors.greenAccent),
              tooltip: 'event',
            ),
            Text('Event',
                style: TextStyle(color: Colors.orange),
                textAlign: TextAlign.end
            ),
          ],
        ),
      ]
        )
    );

  }

输出如下内容：

如何在图标下方制作文本，如果有人知道如何让行或图标从屏幕底部开始。

谢谢！

Answer 1

用列换行图标和文本：

[已编辑]

Column(
  children[
    Expanded(child: Container()),
    Row(
      children: [
        Column(
          children: [
            IconButton(
              iconSize: 70.0,
              icon: const Icon(Icons.add_chart, color: Colors.greenAccent),
              tooltip: 'My Learning',
            ),
            Text('My Learning',
                style: TextStyle(color: Colors.orange)
            ),

Answer 2

所以您可以使用“列”小部件来解决您的问题。

例如，

  column(
     children: <widget>[
         IconButton(
          iconSize: 70.0,
          icon: const Icon(Icons.add_chart, color: Colors.greenAccent),
          tooltip: 'My Learning',
        ),
        Text('My Learning',
            style: TextStyle(color: Colors.orange)
        )
     ]
  )

注意：在您的行小部件中，您可以将此列小部件作为您的直接子级，然后将您的 IconButton 和文本包装到列小部件中。我希望它能帮助你。谢谢！

如何在一行中的图标下方制作文本并使行从屏幕底部开始（Flutter）

How to make a text below icons in a Row and make Row start at the bottom of the screen (Flutter)

mobile

android

flutter

flutter-layout