如何对齐 iconbutton 和文本？

Question

我在行字段中创建了 4 个图标按钮。我用 mainAxisAlignment 将这些 IconButtons 均匀地放置在屏幕上。然后我创建了 4 个文本。我使用 class 列将图标按钮和文本相互连接起来。但是，我无法成功地将 Textbuttons 和 Texts 依次排列。

import 'package:flutter/material.dart'; 

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Column(
              children: [
                IconButton(
                  icon: Icon(
                    Icons.medical_services,
                    color: Colors.black,
                    size: 40,
                  ),
                  onPressed: () {},
                ),
              ],
            ),
            Text("MEDİCAL"),
            Column(
              children: [
                IconButton(
                  icon: Icon(
                    Icons.medical_services,
                    color: Colors.black,
                    size: 40,
                  ),
                  onPressed: () {},
                ),
              ],
            ),
            Text("MEDİCAL"),
            Column(
              children: [
                IconButton(
                  icon: Icon(
                    Icons.medical_services,
                    color: Colors.black,
                    size: 40,
                  ),
                  onPressed: () {},
                ),
              ],
            ),
            Text("MEDİCAL"),
            Column(
              children: [
                IconButton(
                  icon: Icon(
                    Icons.medical_services,
                    color: Colors.black,
                    size: 40,
                  ),
                  onPressed: () {},
                ),
              ],
            ),
            Text("MEDİCAL"),
          ],
        ),
      ),
    );
  }
}

如何修复图片中未对齐的图像？

Answer 1

将文本放入列中试试这个

 Column(
                   
                  children: [
                    IconButton(
                      icon: Icon(
                        Icons.medical_services,
                        color: Colors.black,
                        size: 40,
                      ),
                      onPressed: () {},
                    ),
                    
                    Spacer(),
                     Text("MEDİCAL"),
                  ],
                ),

Answer 2

将 Text 小部件移动到包含 IconButton 的 Column 小部件内，我明白了它们在外部，与 Column 处于同一级别；它们应该放在 Column 内，如下所示：


Column(
   children: [
      IconButton(
        icon: Icon(
          Icons.medical_services,
          color: Colors.black,
          size: 20, // also decreased the size of the icon a bit
        ),
        onPressed: () {},
     ),
     Text("MEDİCAL"), // here, inside the column
   ],
),

那么它们会是这样的：

这就是您要实现的目标吗？

Answer 3

在 Column 小部件中添加 Text 小部件而不是 Row

  Column(
                  children: [
                    IconButton(
                      icon: Icon(
                        Icons.medical_services,
                        color: Colors.black,
                        size: 40,
                      ),
                      onPressed: () {},
                    ),
SizedBox(height: 5,),
                    Text("MEDİCAL"),
                  ],
                ),

提示：不是复制此小部件（减少代码大小），而是将小部件转换为单个小部件或组件，如下所示

    class MainButton extends StatelessWidget {
  MainButton(
      {Key? key,
      required this.medical_services,
      required this.color,
      required this.size2,
      required this.text,
      required this.onPressed2})
      : super(key: key);
  var medical_services = Icons.medical_services;
  var color = Colors.black;
  double size2 = 40;
  var text = "MEDİCAL";
  VoidCallback? onPressed2 = () {};

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        IconButton(
          icon: Icon(
            medical_services,
            color: color,
            size: size2,
          ),
          onPressed: onPressed2,
        ),
        SizedBox(height: 5,),
        Text(text),
      ],
    );
  }
}

像这样打电话

   MainButton(
              medical_services: Icons.medical_services,
              color: Colors.black,
              size2: 40,
              text: "Medical Service",
              onPressed2: () {},
            )

You can check in dartpad

如何对齐 iconbutton 和文本？

How can I align iconbutton and text?

dart

flutter

flutter-layout