时间戳

首页 > 解决方案 > Flutter 如何摆脱行间的空隙

flutter - Flutter 如何摆脱行间的空隙

问题描述

我试图让一个场景包含行和列，但由于某些原因，高度为 20 的行在其他行之间存在间隙，例如下面的 gif [1]：https ://i.stack.imgur.com/mJGsa.gif

我的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
            child: Column(mainAxisSize: MainAxisSize.min, children: [
          Row(children: <Widget>[
            Expanded(
              child: button(150),
            ),
            Expanded(
              child: button(150),
            )
          ]),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Expanded(child: button(20)),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              button(100),
            ],
          )
        ])));
  }
}

Widget button(double buttonwidth) {
  return ButtonTheme(
    height: buttonwidth,
    child: FlatButton(
        color: Colors.grey[200],
        child: Text(
          '',
        ),
        shape: RoundedRectangleBorder(
            side: BorderSide(
                color: Colors.black, width: 1, style: BorderStyle.solid)),
        onPressed: () {}),
  );
}

它不会影响整体性能，但有点烦人。有人可以帮我吗？

标签： flutterdartflutter-layoutrow

解决方案

FlatButton 的默认填充会导致这种情况。您可以添加此行以避免它

FlatButton(
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
)

推荐阅读