FLUTTER:我的图标添加自动边距

问题描述 投票:0回答:1

我正在尝试对齐我的视图,以便所有小部件具有看起来统一的相同边距,但 Icon 正在为我生成自动边距,我不想为此使用应用程序栏。

这是我的观点:

import 'package:flutter/material.dart';

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

  @override
  State<RegisterView> createState() => _RegisterViewState();
}

class _RegisterViewState extends State<RegisterView> {
  @override
  Widget build(BuildContext context) {

    final Size size = MediaQuery.of(context).size;
    final double marginHorizontal = size.width * 0.09;

    return Scaffold(
      body: SingleChildScrollView(
        child: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.symmetric(horizontal: marginHorizontal),
                child: appBar
              ),
              SizedBox(height: size.height * 0.02,),
              Container(
                margin: EdgeInsets.symmetric(horizontal: marginHorizontal),
                child: description
              )
            ],
          ),
        ),
      ),
    );

  }

  Widget get appBar => Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      IconButton(
        iconSize: 40.0,
        onPressed: (){}, 
        icon: const Icon(Icons.arrow_back_ios_new, color: Colors.white,)
      ),
      const SizedBox(
        width: 10.0,
      ),
      Text(
        'Registro',
        style: Theme.of(context).textTheme.titleLarge,
      )
    ],
  );

  Widget get description => Text(
    'Completa los siguientes datos',
    style: Theme.of(context).textTheme.bodySmall,
  );

}

我试图让我的行完全对齐到屏幕左侧,但图标似乎会自动添加边距。

在此输入图片描述

事实上,当删除 IconButton 时,其余的小部件会正确对齐

我试过了,但没用

IconButton(
        padding: EdgeInsets.zero,
        alignment: Alignment.topLeft,
        iconSize: 40.0,
        onPressed: (){}, 
        icon: const Icon(Icons.arrow_back_ios_new, color: Colors.white,)
      ),
Padding(
        padding: const EdgeInsets.all(0.0),
        child: IconButton(
          alignment: Alignment.topLeft,
          iconSize: 40.0,
          onPressed: (){}, 
          icon: const Icon(Icons.arrow_back_ios_new, color: Colors.white,)
        ),
      ),

我几乎可以肯定问题出在图标小部件中,因为当尝试使用手势检测器实现此问题时,问题仍然存在。

flutter
1个回答
0
投票

要删除 IconButton 周围的填充,请尝试向 IconButton 属性添加约束和填充,并再次向 ButtonStyle 属性添加填充。

下面是一个例子:

IconButton(
constraints: const BoxConstraints(),
iconSize: 20,
style: ButtonStyle(
 padding: MaterialStatePropertyAll(EdgeInsets.zero),
 ),
padding: EdgeInsets.zero,
onPressed: () {}
icon: Icon(
 Icons.filter_alt_off,
 ),
),
© www.soinside.com 2019 - 2024. All rights reserved.