Flutter中如何让Card组件内的IconButton居中对齐？

问题描述 #

我在将IconButton对齐到Card组件中部时遇到问题，从图片可见这些IconButton紧贴Card顶部。我希望按钮位于Card的中间位置，尝试过添加Padding或用Center包裹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,
                ),
              ),
            ],
          ),
        ]),
  ),
),

解决方法 #

核心原因是每个Column默认仅包裹自身内容高度，且内部内容默认垂直靠上对齐，即使Row设置了crossAxisAlignment: CrossAxisAlignment.center，Column本身没有占满Row的垂直空间，所以整体内容还是紧贴顶部。

方法一：给Column设置垂直居中和拉伸 #

给每个Column添加两个属性：

• mainAxisAlignment: MainAxisAlignment.center：让Column内部内容垂直居中
• mainAxisSize: MainAxisSize.max：让Column拉伸至Row的整个垂直高度

修改后的Column示例：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: [
    IconButton(
        onPressed: () {},
        icon: Icon(Icons.sticky_note_2),
        iconSize: 35,
        color: Colors.lightBlue),
    Text(
      "Notes",
      style: TextStyle(
        color: Colors.black,
        fontSize: 15,
      ),
    ),
  ],
)

方法二：用Expanded包裹Column #

给每个Column外层套Expanded，让Column占满Row的垂直高度，再配合mainAxisAlignment: MainAxisAlignment.center实现内部居中：

修改后的子项示例：

Expanded(
  child: 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,
        ),
      ),
    ],
  ),
)

两种方法都能让IconButton和文字整体垂直居中于Card内，任选其一即可。

内容的提问来源于stack exchange，提问作者ZXERSTON