颤振移除底部填充容器答案

【问题标题】：Flutter remove bottom padding container颤振移除底部填充容器
【发布时间】：2021-01-30 13:53:56
【问题描述】：

我创建了一个自定义对话框，但是当我在底部添加 2 个按钮时，我仍然有一个填充，我该如何删除它？

这是我的代码

  contentBox(context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child: Container(
        color: Colors.white,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(20),
              child: Column(
                children: [
                  Text(
                    widget.title,
                    style: TextStyle(fontSize: 23, fontWeight: FontWeight.w600),
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(height: 15),
                  Text(
                    widget.descriptions,
                    style: TextStyle(fontSize: 16),
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
            Row(
              children: <Widget>[
                Expanded(
                  child: RaisedButton(
                    child: Text('Reject'),
                    onPressed: () => null,
                  ),
                ),
                Expanded(
                  child: RaisedButton(
                    color: Colors.amber,
                    child: Text('Approve'),
                    onPressed: () => null,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

结果：

PS：如果有优化，请告诉我，因为我是在 Flutter 中开始的

【问题讨论】：

你的意思是按钮后面的填充？
@EhsanAskari 是的
将它们包装在展开的小部件中

标签： flutter containers padding

【解决方案1】：

这是因为RaisedButton 有一个固定的高度。将RaisedButton 包裹在Container 小部件中，并为其指定高度值。像这样应该没问题

Expanded(
    child: Container(
      height: 48,
      child: RaisedButton(
        child: Text('Reject'),
        onPressed: () => null,
      ),
    ),
  ),

为您的两个按钮执行此操作这是输出：

另外，如果你想创建一个警告框，最好使用像AlertDialog这样的颤振内置小部件，如果你想要iOS风格的警告框，那么你可以使用CupertinoAlertDialog

AlertDialog 的解释在这个video 中得到了很好的解释

【讨论】：

【解决方案2】：

RaisedButton 有一些默认填充，因此您需要像这样创建一个自定义按钮：

class CustomButton extends StatelessWidget {
      const CustomButton({
        Key key,
        this.backgroundColor,
        this.child,
      }) : super(key: key);
    
      final child;
      final Color backgroundColor;
    
      @override
      Widget build(BuildContext context) {
        return Container(
          height: 40,
          child: Material(
            color: backgroundColor,
            child: InkWell(
              onTap: () {},
              child: Container(
                alignment: Alignment.center,
                child: child,
              ),
            ),
          ),
        );
      }
    }

现在在你的代码中使用它，用这个替换你的行

Row(
  children: <Widget>[
    Expanded(
     child: CustomButton(
      backgroundColor: Colors.grey[100],
      child: Text('Reject'),
     ),
    ),
    Expanded(
     child: CustomButton(
      backgroundColor: Colors.amber,
      child: Text('Approve'),
     ),
    ),
   ],
 ),

结果：

【讨论】：