如何對齊圖示按鈕和文本？

我在行欄位中創建了 4 個圖示按鈕。我用主軸對齊將這些圖示按鈕均勻地放在螢屏上。然后我創建了 4 個文本。我使用列類將圖示按鈕和文本相互連接起來。但是，我無法成功地將 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"),
              ],
            ),
          ),
        );
      }
    }

我該怎么做才能修復圖片中未對齊的影像？

uj5u.com熱心網友回復：

將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
   ],
),

那么它們看起來像這樣：

這就是你想要達到的目標嗎？

uj5u.com熱心網友回復：

將文本放在列中試試這種方式

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

標籤：扑 镖 视觉工作室代码 颤振布局

上一篇：Flutter/Dart：將專案從串列添加到JSON正文

下一篇：在Flutter中的ResultForm小部件上方找不到正確的Provider<T>