Flutter：如何制作這樣的按鈕？

Question

我嘗試使用TextButton.Icon來制作如下效果。 但是我發現文字只能在圖標的左邊或者右邊。 我怎樣才能把文字放在這樣的圖標下面？

Answer 1

1. 創建此類內容的最簡單方法是正確使用列和行小部件。
2. 我添加了完整的代碼和屏幕截圖，請在下面查看 [1]： https://i.stack.imgur.com/hRzy9.png
3. 為帶按鈕的圖標創建了一個可重復使用的小部件，並將其添加到我的主 class 即測試 class

class Test extends StatelessWidget {
  const Test({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const SizedBox(height: 10,),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconWithTextButton(icon:const Icon(Icons.lock, color: Colors.red,),text: "Lock",onClicked: (){},),
                IconWithTextButton(icon:const Icon(Icons.alarm, color: Colors.amber),text: "Alarm",onClicked: (){},),
                IconWithTextButton(icon:const Icon(Icons.call, color: Colors.green),text: "call",onClicked: (){},),
                IconWithTextButton(icon:const Icon(Icons.wrong_location_sharp, color: Colors.greenAccent),text: "location",onClicked: (){},),
                IconWithTextButton(icon:const Icon(Icons.add, color: Colors.tealAccent),text: "Add",onClicked: (){},),
              ],
            ),
            const SizedBox(height: 20,),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconWithTextButton(icon: const Icon(Icons.lock, color: Colors.red,),text: "Lock",onClicked: (){},),
                IconWithTextButton(icon:const Icon(Icons.alarm, color: Colors.amber),text: "Alarm",onClicked: (){},),
                IconWithTextButton(icon:const Icon(Icons.call, color: Colors.green),text: "call",onClicked: (){},),
                IconWithTextButton(icon:const Icon(Icons.wrong_location_sharp, color: Colors.greenAccent),text: "location",onClicked: (){},),
                IconWithTextButton(icon:const Icon(Icons.add, color: Colors.tealAccent),text: "Add",onClicked: (){},),
              ],
            )
          ],
        ),
      ),
    );
  }
}

1. 這是可重復使用的小部件，帶有可重復使用的文本、可重復使用的 onclick 和可重復使用的圖標

class IconWithTextButton extends StatelessWidget {
  String text;
  Icon icon;
  VoidCallback onClicked;
  IconWithTextButton({Key? key, required this.text, required this.onClicked, required this.icon}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onClicked,
      child: Container(
        child: Column(
          children: [
            icon,
            const SizedBox(height: 10,),
            Text(text),
          ],
        ),
      ),
    );
  }
}


 

Answer 2

您可以使用 Column Widget 並使用 Icon 和 TextField 填充其子項。 然后用 GestureDetector 包裹整個小部件以實現按下功能。 你也可以用 InkWell 和 Material 包裹它，以獲得像其他按鈕一樣的飛濺效果。

Answer 3

你不需要用柱子包裹。

TextButton(
        onPressed:(){},
        child: Column(
          children: [
            Icon(Icons.play_arrow,color:Colors.green),
            Text(
              'Hello',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),

Answer 4

我認為 GirdView Widget 是制作這樣的按鈕的最佳方式-

GridView.count(
    crossAxisCount: 4,
    children:  List<Widget>.generate(16, (index) {
      return  GridTile(
        child:GestureDetector(  
          onTap:(){
            print(index.toString());
          },
      child:    Card(
          color: Colors.blue.shade200,
          child:  Column(
            children:[  Text('tile $index'),
                         Icon(Icons.alarm)
          ])
        )),
     );
    }),
  ),
 

借助索引參數，您可以根據按鈕類型傳遞 function。 如果這個答案對您有幫助，請給答案點贊。 謝謝！