英文:
Padding and text on Icon Button - flutter
问题
我正在创建一个带有IconButton的菜单,但我想要减少按钮之间的间距。目前看起来是这样的:
 [![screen][1]][1]
但我想要这样:
[![menu][2]][2]
另外,我想知道如何将文本放在每个按钮下面,就像图片中那样。我尝试使用其他类型的按钮,但没有成功。
这是Menu.dart的代码:
```dart
import 'package:flutter/material.dart';
void main() => runApp(Menu());
class Menu extends StatefulWidget {
  const Menu({super.key});
  @override
  State<Menu> createState() => _MenuState();
}
class _MenuState extends State<Menu> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color.fromARGB(255, 160, 244, 230),
        elevation: 0,
      ),
        body: Container(
        padding: EdgeInsets.symmetric(horizontal: 90),
        decoration: BoxDecoration( 
            gradient:  LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color.fromARGB(255, 160, 244, 230), Color.fromARGB(255, 92, 172, 178)]
            )
          ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: Image.asset("assets/entrada.png"),
                  iconSize: 190,
                  onPressed: () {},
                  ),
                IconButton(
                  icon: Image.asset("assets/saida.png"),
                  iconSize: 190,
                  onPressed: () {},
                  
                  ),
                IconButton(
                  icon: Image.asset("assets/categorias.png"),
                  iconSize: 190,
                  onPressed: () {},
                )
              ]
            )
        )
    );
  }
}
英文:
I am creating a menu with IconButton, but I want to decrease the space between the buttons.
Currently It looks like this:
But I want this:
Also, I would like to know how to put the text below each button, just like the image. I have tried to use other types of button but didn't worked.
This is Menu.dart code:
import 'package:flutter/material.dart';
void main() => runApp(Menu());
class Menu extends StatefulWidget {
  const Menu({super.key});
  @override
  State<Menu> createState() => _MenuState();
}
class _MenuState extends State<Menu> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color.fromARGB(255, 160, 244, 230),
        elevation: 0,
      ),
        body: Container(
        padding: EdgeInsets.symmetric(horizontal: 90),
        decoration: BoxDecoration( 
            gradient:  LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color.fromARGB(255, 160, 244, 230), Color.fromARGB(255, 92, 172, 178)]
            )
          ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: Image.asset("assets/entrada.png"),
                  iconSize: 190,
                  onPressed: () {},
                  ),
                IconButton(
                  icon: Image.asset("assets/saida.png"),
                  iconSize: 190,
                  onPressed: () {},
                  
                  ),
                IconButton(
                  icon: Image.asset("assets/categorias.png"),
                  iconSize: 190,
                  onPressed: () {},
                )
              ]
            )
        )
    );
  }
}
答案1
得分: 1
以下是代码的翻译部分:
首先,你需要创建一个自定义按钮,如下所示:
Widget customButton(
  {
    required String image,
    required String title,
    required Function() onTap,
    required Size size,
  }) {
  return GestureDetector(
    onTap: onTap,
    child: Container(
      color: Colors.transparent,
      child: Column(
        children: [
          Container(
            height: size.height,
            width: size.width,
            constraints: BoxConstraints(maxHeight: 130, maxWidth: 130),
            child: Image.asset(image),
          ),
          Text(title),
        ],
      ),
    ),
  );
}
然后像这样使用它:
Padding(
  padding: const EdgeInsets.symmetric(vertical: 32.0),
  child: LayoutBuilder(builder: (context, constraints) {
    var buttonMargin = 32.0;
    var buttonSize = constraints.maxHeight / 3 - buttonMargin;
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        customButton(
          image: "assets/entrada.png",
          title: '一些文本',
          onTap: () {},
          size: Size(buttonSize, buttonSize),
        ),
        Padding(
          padding: EdgeInsets.symmetric(vertical: buttonMargin),
          child: customButton(
            image: "assets/saida.png",
            title: '一些文本 2',
            onTap: () {},
            size: Size(buttonSize, buttonSize),
          ),
        ),
        customButton(
          image: "assets/categorias.png",
          title: '一些文本 3',
          onTap: () {},
          size: Size(buttonSize, buttonSize),
        ),
      ],
    );
  }),
)
希望这可以帮助你!
英文:
First you need to build your custom button like this:
Widget customButton(
      {required String image,
      required String title,
      required Function() onTap,
      required Size size}) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        color: Colors.transparent,
        child: Column(
          children: [
            Container(
              height: size.height,
              width: size.width,
              constraints: BoxConstraints(maxHeight: 130, maxWidth: 130),
              child: Image.asset(image),
            ),
            Text(title),
          ],
        ),
      ),
    );
  }
then use it like this:
Padding(
    padding: const EdgeInsets.symmetric(vertical: 32.0),
    child: LayoutBuilder(builder: (context, constraints) {
      var buttonMargin = 32.0;
      var buttonSize = constraints.maxHeight / 3 - buttonMargin;
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          customButton(
            image: "assets/entrada.png",
            title: 'some text',
            onTap: () {},
            size: Size(buttonSize, buttonSize),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: buttonMargin),
            child: customButton(
              image: "assets/saida.png",
              title: 'some text 2',
              onTap: () {},
              size: Size(buttonSize, buttonSize),
            ),
          ),
          customButton(
            image: "assets/categorias.png",
            title: 'some text 3',
            onTap: () {},
            size: Size(buttonSize, buttonSize),
          ),
        ],
      );
    }),
  )
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。




评论