Flutter：如何对齐 ElevatedButton.icon 底部的文本？

Question

我在 GridView.count 中使用 ElevatedButton.icon，按钮的标签垂直显示在按钮的右侧。我需要按钮的标签在底部。这是我的代码：

body: Scrollbar(
    isAlwaysShown: true,
    child: GridView.count(
      primary: false,
      padding: const EdgeInsets.all(30),
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      crossAxisCount: 2,
      children: <Widget>[
       ElevatedButton.icon(
            onPressed: () {
              Navigator.push(context,MaterialPageRoute(builder: (context) => const MyProfilePage()),);},
            icon: Image.asset('assets/images/cat1.jpg', width: 120, height: 120,),
            label: const Text('profile'),
        ),

        ElevatedButton.icon(
          onPressed: () {
            Navigator.push(context,MaterialPageRoute(builder: (context) => const ToDoList1()),);},
            icon: Image.asset('assets/images/fatty.jpg', width: 120, height: 120,),
            label: const Text('todo'),
        ),

        ElevatedButton.icon(
          onPressed: () {
            Navigator.push(context,MaterialPageRoute(builder: (context) => const ChatPage()),);},
          icon: Image.asset('assets/images/lovely.jpg', width: 120, height: 120,),
          label: const Text('chat'),
        ),

        ElevatedButton.icon(
          onPressed: () {
            Navigator.push(context,MaterialPageRoute(builder: (context) => const SettingsPage()),);},
          icon: Image.asset('assets/images/peach.jpg', width: 120, height: 120),
          label: const Text('settings'),
        ),
      ],
    ),
  )[enter image description here][1]

Answer 1

ElevatedButton 的图标构造函数旨在用于放置在按钮标签左侧的较小图标，因此您不能在这种情况下使用它。尝试使用标准构造函数为其子项添加一列，例如：

ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ChatPage()),
                );
              },
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/images/lovely.jpg',
                    width: 120,
                    height: 120,
                  ),
                  const Text('chat'),
                ],
              ),
            ),

Answer 2

ElevatedButton.icon的图标和标签排成一排

创建您自己的自定义按钮应该有助于解决您的问题：

class CustomElevatedButton extends StatelessWidget {
  final String buttonName;
  final String imagePath;
  const CustomElevatedButton({
    Key? key, required this.buttonName, required this.imagePath,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.push(context,MaterialPageRoute(builder: (context) => const MyProfilePage()),);},
      child:  Material(
        elevation: 5,
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children:  [
              Image.asset(imagePath, width: 120, height: 120,),
              Text(buttonName),
            ],
          ),
          width: 100.0,
          height: 100.0,
          decoration: const BoxDecoration(
              color: Colors.blueAccent,
              borderRadius: BorderRadius.all(Radius.circular(8))),
        ),
      ),
    );
  }
}

Flutter：如何对齐 ElevatedButton.icon 底部的文本？

Flutter: How to align text in the bottom of ElevatedButton.icon?

android

android-studio

flutter