我在将图标按钮与卡的中间对齐时遇到了问题.如图所示,图标按钮位于卡片顶部.

我怎么才能让它在卡的一半大小上满足呢?有什么建议吗?(我希望按钮位于卡片的中间)

try :我try 将填充或包装我的行小部件与中心,但它不起作用.

 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

推荐答案

try 下面的代码并将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,
              ),
            ),
          ],
        ),
      ],
    ),
  ),
),

Result Screen-> image

Flutter相关问答推荐

Flutter:sqflite DB

修复容器`Text`和容器表单之间的重叠

如何在不使用NULL-check(!)的情况下缩小`FutureBuilder.Builder()`内部的`Snaphot`范围

使用自定义控制器将项插入到ListView中时行为不正确

如何在Flutter 中不从getX库中初始化GetxController中的变量

'Flutter的无效常数值错误

带有图标抖动的自定义下拉按钮

按一下按钮即可更新 fl_chart

Flutter中不使用Container是否可以做margin

GridView 渲染项目之间有微小的间隙

setState 方法有时有效,有时无效

Flutter 分析发现 Gitlab CI/CD 管道中的问题,但它在本地没有

java.lang.IncompatibleClassChangeError:找到接口 com.google.android.gms.location.SettingsClient,

如何根据应用程序主题(深色和浅色)更改谷歌 map 的主题?

为什么 orientation == Orientation.portrait 总是正确的,尽管我的设备已经处于横向

在 Android 12+ 中,REST API 调用在 flutter 中非常慢,在 WiFi 中需要 10 秒,而在移动数据中不到一秒

如何让多个图标转到不同的网址

Flutter 活跃的互联网连接

Flutter:font_awesome_icon pro 版报错?如何设置 font_awesome 克隆仓库的路径?

如何在Flutter 的 initState 中初始化 Firestore 查询