填充和图标按钮上的文本 – flutter

huangapple go评论67阅读模式
英文:

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:

填充和图标按钮上的文本 – flutter

But I want this:

填充和图标按钮上的文本 – flutter

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 &#39;package:flutter/material.dart&#39;;

void main() =&gt; runApp(Menu());

class Menu extends StatefulWidget {
  const Menu({super.key});

  @override
  State&lt;Menu&gt; createState() =&gt; _MenuState();
}

class _MenuState extends State&lt;Menu&gt; {
  @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(&quot;assets/entrada.png&quot;),
                  iconSize: 190,
                  onPressed: () {},
                  ),
                IconButton(
                  icon: Image.asset(&quot;assets/saida.png&quot;),
                  iconSize: 190,
                  onPressed: () {},
                  
                  ),
                IconButton(
                  icon: Image.asset(&quot;assets/categorias.png&quot;),
                  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: &quot;assets/entrada.png&quot;,
            title: &#39;some text&#39;,
            onTap: () {},
            size: Size(buttonSize, buttonSize),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: buttonMargin),
            child: customButton(
              image: &quot;assets/saida.png&quot;,
              title: &#39;some text 2&#39;,
              onTap: () {},
              size: Size(buttonSize, buttonSize),
            ),
          ),
          customButton(
            image: &quot;assets/categorias.png&quot;,
            title: &#39;some text 3&#39;,
            onTap: () {},
            size: Size(buttonSize, buttonSize),
          ),
        ],
      );
    }),
  )

填充和图标按钮上的文本 – flutter

huangapple
  • 本文由 发表于 2023年2月7日 03:45:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/75365881.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定