英文:
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),
),
],
);
}),
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论