英文:
Flutter: Inconsistent column padding on Buttons between Android and Windows
问题
我在Flutter中创建了一个简单的Material App:
flutter create --platforms=android,windows columntest
当我在Android和Windows上运行程序时,我在Android上的ElevatedButton之间会出现一些填充,但在Windows上不会。你知道这是从哪里来的吗?我该如何使设计保持一致?
这种行为似乎只出现在按钮(TextButton、OutlinedButton、ElevatedButton)上。我还在容器(带边框)上进行了测试,那里没有发生这种情况。
以下是小应用的代码:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(child: const Text("Foobar1"), onPressed: () {}),
ElevatedButton(child: const Text("Foobar2"), onPressed: () {}),
],
),
),
),
);
}
}
以下是运行时的屏幕截图:
以下是我的Flutter版本:
$ flutter --version
Flutter 3.10.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 84a1e904f4(3周前)• 2023年05月09日 07:41:44 -0700
Engine • revision d44b5a94c9
Tools • Dart 3.0.0 • DevTools 2.23.1
我的Android模拟器是Pixel_3a_API_33_x86_64。但是,这种行为也在我的物理Pixel 6上出现(带有Android UpsideDownCake)。
期待你的回复。
最好的问候
Michael
英文:
I have created a simple material app in flutter with:
flutter create --platforms=android,windows columntest
When I run the program on Android and Windows, I get some kind of padding between the ElevatedButtons on Android, but not on Windows. Do you know where this comes from and how I can make the design consistent?
The behavior seems to occur only with buttons (TextButton, OutlinedButton, ElevatedButton).
I have also tested this with container (with border), there it does not occur.
Here the code from the small app:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(child: const Text("Foobar1"), onPressed: () {}),
ElevatedButton(child: const Text("Foobar2"), onPressed: () {}),
],
),
),
),
);
}
}
Here is a screenshot at runtime:
Here my flutter version:
$ flutter --version
Flutter 3.10.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 84a1e904f4 (3 weeks ago) • 2023-05-09 07:41:44 -0700
Engine • revision d44b5a94c9
Tools • Dart 3.0.0 • DevTools 2.23.1
My Android Emulator is an: Pixel_3a_API_33_x86_64
But the behaviour also occurs on my physical Pixel 6 (with android UpsideDownCake)
I look forward to your responses.
best regards
Michael
答案1
得分: 1
这是Flutter实现的。
这个行为是由MaterialApp
的ThemeData.materialTapTargetSize
参数决定的。
这个特性决定了Material按钮的可触摸尺寸,在你的情况下是ElevatedButton
。
你有两个潜在的解决方案:
- 像下面这样更改
ElevatedButton
的填充:
ElevatedButton(
onPressed: () {},
style: const ButtonStyle(padding: MaterialStateProperty.all(EdgeInsets.zero)),
child: const Icon(Icons.abc),
),
- 更改
materialApp
的值:
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap
),
home: CupertinoPickerExample(),
)
参考链接:https://stackoverflow.com/a/67580951
英文:
So, this implementation is done by flutter.
This is behaviour is because of the ThemeData.materialTapTargetSize parameter for the MaterialApp
.
This feature decides what should be touchable dimensions of Material Button, in your case ElevatedButton
.
You have 2 potential solutions
- Change padding from ElevatedButton like below
ElevatedButton(
onPressed: () {},
style: const ButtonStyle(padding: MaterialStatePropertyAll(EdgeInsets.zero)),
child: const Icon(Icons.abc),
),
- Change value from material app
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap),
home: CupertinoPickerExample(),
)
Reference : https://stackoverflow.com/a/67580951
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论