时间戳

首页 > 解决方案 > IconButton 与可点击区域不对齐

flutter - IconButton 与可点击区域不对齐

问题描述

我有一个简单的图标按钮，如下所示，无论我做什么，可点击区域都不与图标对齐。尝试在 Linux、Web 和 Android 上运行该应用程序.. 都遇到同样的问题。

下图

        home: Scaffold(
            body: Column(children: [
      IconButton(
        onPressed: () => {},
        icon: Icon(
          Icons.highlight_off,
          size: 70,
          color: Colors.red,
        ),
      ),
    ])));

我的代码的简化版本：

MaterialApp(
        home: Scaffold(
            body: Center(
      child: Stack(
          alignment: AlignmentDirectional.center,
          overflow: Overflow.visible,
          children: [
            Container(
              width: 500,
              height: 300,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20.0),
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.5),
                      spreadRadius: 5,
                      blurRadius: 7,
                      offset: Offset(0, 3),
                    ),
                  ]),
            ),
            Positioned(
              top: -40,
              right: 5,
              child: IconButton(
                onPressed: () => {},
                icon: Icon(
                  Icons.highlight_off,
                  size: 70,
                  color: Colors.red,
                ),
              ),
            ),
          ]),
    )));

标签： flutter

解决方案

干得好。

发生这种情况的原因，你iconSize的很大。因此，根据这一点，您需要确保您的按钮本身调整其大小。为此，您可以使用BoxConstraints它来提供它minHeight。

import 'package:flutter/material.dart';

void main() async {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
              alignment: AlignmentDirectional.center,
              overflow: Overflow.visible,
              children: [
                Container(
                  width: 500,
                  height: 300,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20.0),
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.5),
                          spreadRadius: 5,
                          blurRadius: 7,
                          offset: Offset(0, 3),
                        ),
                      ]),
                ),
                Positioned(
                  top: -40,
                  right: 5,
                  child: IconButton(
                    constraints: BoxConstraints(
                      minHeight: 100,
                    ),
                    onPressed: () => {},
                    icon: Icon(
                      Icons.highlight_off,
                      size: 70,
                      color: Colors.red,
                    ),
                  ),
                ),
              ]),
        ),
      ),
    ),
  );
}

推荐阅读