如何删除屏幕底部提升按钮下方的空间？

Posted 2023-02-23

【中文标题】如何删除屏幕底部提升按钮下方的空间？

【英文标题】：How to remove the space under the elevated button at the bottom of the screen?

【发布时间】：2022-01-03 15:41:40

【问题描述】：

 import 'package:flutter/material.dart';

class AddPlaceScreen extends StatefulWidget 
  static const routeName = '/add-place';
  @override
  _AddPlaceScreenState createState() => _AddPlaceScreenState();


class _AddPlaceScreenState extends State<AddPlaceScreen> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Add new Place data'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text('User Inputs'),
          ElevatedButton.icon(
            onPressed: () ,
            icon: Icon(Icons.add),
            label: Text('Add Place'),
          ),
        ],
      ),
    );
  

这里我在位于页面底部的提升按钮下有一个空间，请提供任何解决方案来删除它。

【问题讨论】：

在我的机器和飞镖垫上似乎都可以，我认为这是您的模拟器问题或您从哪里调用

【参考方案1】：

试试下面的代码希望它对你有帮助。你可以用BottomSheet也可以here

Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Text('User Inputs'),
      ],
    ),
  ),
  bottomSheet: Container(
    width: double.infinity,
    child: ElevatedButton.icon(
      style: ButtonStyle(
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(0),
             
          ),
        ),
      ),
      onPressed: () 
        // Add your button press function here
        print('Button Pressed');
      ,
      icon: Icon(
        Icons.add,
      ),
      label: Text(
        'Add Place',
      ),
    ),
  ),
);

您的结果屏幕->

【参考方案2】：

请参考以下代码

在 ElevatedButton.icon Widget 中添加这段代码

样式：按钮样式（ TapTargetSize：材质TapTargetSize .shrinkWrap, /* 请添加这个以避免填充 */ ),

class AddPlaceScreen extends StatefulWidget 
  static const routeName = '/add-place';
  @override
  _AddPlaceScreenState createState() => _AddPlaceScreenState();


class _AddPlaceScreenState extends State<AddPlaceScreen> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Add new Place data'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text('User Inputs'),
          ElevatedButton.icon(
            style: ButtonStyle(
              tapTargetSize: MaterialTapTargetSize
                  .shrinkWrap, /* Please add this to avoid padding */
            ),
            onPressed: () ,
            icon: Icon(Icons.add),
            label: Text('Add Place'),
          ),
        ],
      ),
    );
  

【讨论】：

把原代码中需要改动的地方和代码一起写出来。

请检查上面的编辑代码

您应该始终在代码中使用 cmets 来标记更改。

好的，不便之处敬请见谅

【参考方案3】：

要实现这一点，请在 ElevatedButton 周围使用 remove the drop shadow 和 extra margin。

为此设置elevation to 0，它会移除投影。

要消除按钮周围的多余边距，请使用材质选项卡目标大小并将其设置为MaterialTabTargetSize.shrinkWrap。 MaterialTabTargetSize 基本上确保您有更大的空间可以用手指敲击，如果我们通过将其设置为 .shrinkWrap 来缩小它，您就可以摆脱多余的边距。

在 ElevatedButton 中添加此代码：

tapTargetSize: MaterialTabTargetSize.shrinkWrap,
elevation: 0,

因此，通过在此处进行设置，按钮现在真正位于屏幕的末端。