Flutter: Android和Windows之间按钮的列内边距不一致

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

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: Android和Windows之间按钮的列内边距不一致

以下是我的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:
Flutter: Android和Windows之间按钮的列内边距不一致

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实现的。

这个行为是由MaterialAppThemeData.materialTapTargetSize参数决定的。
这个特性决定了Material按钮的可触摸尺寸,在你的情况下是ElevatedButton

你有两个潜在的解决方案:

  1. 像下面这样更改ElevatedButton的填充:
ElevatedButton(
  onPressed: () {},
  style: const ButtonStyle(padding: MaterialStateProperty.all(EdgeInsets.zero)),
  child: const Icon(Icons.abc),
),
  1. 更改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

  1. Change padding from ElevatedButton like below
    ElevatedButton(
              onPressed: () {},
              style: const ButtonStyle(padding: MaterialStatePropertyAll(EdgeInsets.zero)),
              child: const Icon(Icons.abc),
            ),
  1. 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

huangapple
  • 本文由 发表于 2023年6月2日 01:52:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/76384490.html
匿名

发表评论

匿名网友

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

确定