flutter - 如何对齐卡片小部件 flutter 中的图标按钮?

标签 flutter

我在将图标按钮与卡片中间对齐时遇到问题。正如您在图片中看到的,图标按钮位于卡片顶部。

如何使其符合卡片的一半尺寸?有什么建议么? (我希望按钮位于卡片的中间)

尝试过:我尝试放置填充或用中心包裹我的 Row 小部件,但它不起作用。

 child: new Container(
            height: 150.0,
            width: MediaQuery.of(context).size.width,
            child: new Card(
              color: Colors.white,
              elevation: 8.0,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Column(
                      children: [
                        IconButton(
                            onPressed: () {},
                            icon: Icon(Icons.sticky_note_2),
                            iconSize: 35,
                            color: Colors.lightBlue),
                        Text(
                          "Notes",
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 15,
                          ),
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        IconButton(
                          onPressed: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => QuizRoute()),
                            );
                          },
                          icon: Icon(Icons.quiz),
                          iconSize: 35,
                        ),
                          Text(
                          "Quizzes",
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 15,
                          ),
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        IconButton(
                          onPressed: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => EbooksRoute()),
                            );
                          },
                          icon: Icon(Icons.auto_stories),
                          iconSize: 35,
                        ),
                          Text(
                          "Ebooks",
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 15,
                          ),
                        ),
                      ],
                    ),
                  ]),
            ),
          ),
        ),
      ],
    ),

enter image description here

最佳答案

尝试下面的代码,并将 mainAxisAlignment: MainAxisAlignment.center, 设置为每个 Column 小部件。请参阅layoutAlign

Container(
  height: 150.0,
  width: MediaQuery.of(context).size.width,
  child: Card(
    color: Colors.white,
    elevation: 8.0,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
                onPressed: () {},
                icon: Icon(Icons.sticky_note_2),
                iconSize: 35,
                color: Colors.lightBlue),
            Text(
              "Notes",
              style: TextStyle(
                color: Colors.black,
                fontSize: 15,
              ),
            ),
          ],
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.quiz),
              iconSize: 35,
            ),
            Text(
              "Quizzes",
              style: TextStyle(
                color: Colors.black,
                fontSize: 15,
              ),
            ),
          ],
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.auto_stories),
              iconSize: 35,
            ),
            Text(
              "Ebooks",
              style: TextStyle(
                color: Colors.black,
                fontSize: 15,
              ),
            ),
          ],
        ),
      ],
    ),
  ),
),

结果屏幕-> image

关于flutter - 如何对齐卡片小部件 flutter 中的图标按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/75133171/

相关文章:

android - Flutter APK 在手机中构建,但无法打开?

android-studio - Gradle无法在android studio中工作[flutter]

flutter - 强制 TabController 创建所有选项卡 Flutter

flutter - 如何更改 TextButton flutter 上的字体大小

flutter - 如何在Flutter中为TextField使用BeveledRectangleBorder

flutter - 如何获取github工作树或项目结构

Flutter 在重新创建 Widget 时重置 StatefulWidget 状态

listview - 如何让Flutter ListView像图片一样有边框半径

flutter - 为 flutter 和 dart 定义 linter 规则

flutter - Flutter-流错误未持续(使用阵营模式)