在标题和文本字段之间填充不呈现？答案

【问题标题】：Padding not rendering between header and textfield?在标题和文本字段之间填充不呈现？
【发布时间】：2021-05-19 22:26:39
【问题描述】：

我想在我的标题和文本字段之间添加空格，因为目前它们太靠近了。我尝试向具有文本字段的行添加填充，但是没有移动。有什么想法吗？

Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
          Image.asset(
            "assets/Login_Photo.jpg",
            height: MediaQuery.of(context).size.height * 0.4,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Padding(
            padding: const EdgeInsets.all(50.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Login',
                  style: TextStyle(
                    fontSize: 35,
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.w900,
                  ),
                ),
                Row(
              padding: const EdgeInsets.all(50.0),
                  children: <Widget>[
                  Expanded(
                      child: TextField(
                          decoration:
                              InputDecoration(hintText: "Email Address"))),

【问题讨论】：

能否产生一个最小的、完整的、可验证的例子？
@JohnJoe 这是一个示例.. 在我的环境中工作

标签： flutter

【解决方案1】：

我已经编辑了您的代码，所以您可以将Row 包裹在Container 中，并根据您的UI 将边距设置为上、下、左、右，请告诉我我的代码是否有用.

  Widget build(BuildContext context) {
    return Scaffold(
          body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Image.asset(
            "assets/Login_Photo.jpg",
            height: MediaQuery.of(context).size.height * 0.4,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Padding(
            padding: const EdgeInsets.all(50.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Login',
                  style: TextStyle(
                    fontSize: 35,
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.w900,
                  ),
                ),
                Container(
                  margin:
                      EdgeInsets.only(top: 10, left: 0, right: 0, bottom: 0),
                  child: Row(
                    // padding: const EdgeInsets.all(50.0),
                    children: <Widget>[
                      Expanded(
                        child: TextField(
                          decoration:
                              InputDecoration(hintText: "Email Address"),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

【讨论】：

非常感谢！

【解决方案2】：

使用 SizedBox 小部件，通过 height 属性，您可以指定要分开的距离。例如：

SizedBox(height: 10)//change this value for which you need.

完整代码，如下所示：

Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
          Image.asset(
            "assets/Login_Photo.jpg",
            height: MediaQuery.of(context).size.height * 0.4,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Padding(
            padding: const EdgeInsets.all(50.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Login',
                  style: TextStyle(
                    fontSize: 35,
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.w900,
                  ),
                ),
                Sizedbox(height: 10),
                Row(
              padding: const EdgeInsets.all(50.0),
                  children: <Widget>[
                  Expanded(
                      child: TextField(
                          decoration:
                              InputDecoration(hintText: "Email Address"))),

【讨论】：

谢谢，但这似乎不起作用.. 引发错误。我之前也试过这个，就像你提供的那样，但没有运气。还有其他想法吗？

【解决方案3】：

奇怪的是它对你不起作用，也许这些替代方法之一对你有用：

容器并给出一些高度：

Column(
  children: <Widget>[
    Widget1(),
    Container(height: 10), // set height
    Widget2(),
  ],
)

垫片

Column(
  children: <Widget>[
    Widget1(),
    Spacer(), // use Spacer
    Widget2(),
  ],
)

展开

Column(
  children: <Widget>[
    Widget1(),
    Expanded(child: SizedBox()), // use Expanded
    Widget2(),
  ],
)

主轴对齐

Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround, // mainAxisAlignment
  children: <Widget>[
    Widget1(),
    Widget2(),
  ],
)

包装

Wrap(
  direction: Axis.vertical, // make sure to set this
  spacing: 20, // set your spacing
  children: <Widget>[
    Widget1(),
    Widget2(),
  ],
)

Space between Column's children in Flutter

【讨论】：