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。 如果这个答案对您有帮助，请给答案点赞。 谢谢！