时间戳

首页 > 解决方案 > 删除列元素之间的奇怪空间

flutter - 删除列元素之间的奇怪空间

问题描述

我有以下布局：

样本布局

我想删除上框和按钮之间的空间，因此两者似乎都在同一个框中。

代码：

        Column(
          children: [
            // RAW CONTENT
            ConstrainedBox(
              constraints: BoxConstraints(
                  maxWidth: double.infinity,
                  maxHeight: MediaQuery.of(context).size.height *
                      _PREVIEW_MAX_HEIGHT_RATIO),
              child: Container(
                padding: EdgeInsets.only(
                    left: MARGIN_LAT,
                    top: MARGIN_TOP,
                    right: MARGIN_LAT),
                child: Container(
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.black38),
                        borderRadius: BorderRadius.only(
                            topLeft: _ROUND_BORDER,
                            topRight: _ROUND_BORDER)),
                    child: Center(child: Text(_displayValue))),
              ),
            ),
            // CONTENT BUTTONS
            Container(
              padding: EdgeInsets.only(
                  left: MARGIN_LAT, top: 0, right: MARGIN_LAT),
              child: Row(
                children: [
                  Expanded(
                    child: RaisedButton(
                        padding: EdgeInsets.zero,
                        child: Text(_static.translate(
                            context, 'result_contentButton_raw')),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.only(
                                bottomLeft: _ROUND_BORDER)),
                        onPressed: () {}),
                  ),
                  Expanded(
                    child: RaisedButton(
                        padding: EdgeInsets.zero,
                        child: Text(_static.translate(context,
                            'result_contentButton_displayValue')),
                        shape: ContinuousRectangleBorder(),
                        onPressed: () {}),
                  ),
                  Expanded(
                    child: RaisedButton(
                        padding: EdgeInsets.zero,
                        child: Text(_static.translate(
                            context, 'result_contentButton_copy')),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.only(
                                bottomRight: _ROUND_BORDER)),
                        onPressed: () {}),
                  )
                ],
              ),
            ),
          ],
        ),

有没有办法做到这一点？谢谢。

标签： flutterflutter-layout

解决方案

您注意到的边距是因为RaisedButton 小部件上 materialTapTargetSize的默认值。

要删除它，请将其更改为MaterialTapTargetSize.shrinkWrap，如下所示：

Expanded(
    child: RaisedButton(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        padding: EdgeInsets.zero,
        child: Text("This is an other text"),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                bottomLeft: _ROUND_BORDER
            )
        ),
        onPressed: () {}
    ),
)

推荐阅读