如何在Flutter中移除Column中小部件之间的空格？

Question

我寻找答案，但是找不到。

为什么Column小部件在子小部件之间留有空白？
我想要从我的小部件布局中移除这个。以下是我的代码和空白位置。

代码！！

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  SystemChrome.setEnabledSystemUIOverlays([]);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Clock',
      theme: ThemeData(
        primaryColor: Colors.blue
      ),
      home: Social(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class Social extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0.0
      ),
      backgroundColor: Colors.white,
      body: Column(
        children: <Widget>[
          Flexible(
            flex: 1,
            child: Row(
              children: <Widget>[
                ClipOval(
                  clipper: CircleClipper(),
                  child: Image.asset('assets/irene.jpg')
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 8.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            'Irene',
                            style: TextStyle(
                              color: Colors.blue,
                              fontWeight: FontWeight.bold,
                              fontSize: 15.0
                            )
                          )
                        ),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text('Yesterday, Ney York')
                        )
                      ],
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.topRight,
                  child: IconButton(
                    color: Theme.of(context).primaryColor,
                    icon: Icon(Icons.menu),
                    onPressed: (){},
                  ),
                )
              ],
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width/1.1,
            height: MediaQuery.of(context).size.height/2,
            child: Card(
              child: Image.asset('assets/irene.jpg'),
              color: Colors.white,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
              elevation: 10.0,
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 30.0,right: 30.0,top: 15.0),
            child: Row(
              children: <Widget>[
                Image(
                  image: AssetImage('assets/like.png'), 
                  width: 30.0,
                  height: 30.0,
                ),
                SizedBox(width: 20.0,),
                Image.asset('assets/chat.png'),
                Expanded(child: Container()),
                Image.asset('assets/share.png'),
              ],
            ),
          ),
          Expanded(child: Container()),
        ],
      ),
    );
  }
}

class CircleClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    return Rect.fromCircle(center: Offset(size.width/2,size.height/4), radius: size.width/3);
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return true;
  }
}

我该如何修复它，以及我需要使用哪些小部件？
为了使Column的子小部件具有大小，我必须使用Flexible、Expanded等。
是否还有其他小部件可以满足这个条件？

- baeharam

Answer 1

那是因为您正在使用 Flexible，它会将内部的 Widget 扩展以填充可用空间。

将此更改为：

   body: Column(
          children: <Widget>[
            Flexible(
              flex: 1,

变为这样：

   body: Column(
          children: <Widget>[
            SizedBox(
              height: 60.0,

它应该能够工作

- diegoveloper

---

在回答前，我将"Row"修改为"Stack"并使用了"Positioned"，无论如何感谢。 - baeharam

Answer 2

我看到问题不在Column小部件中，而是在其第一个子元素中，它占用的高度比您预期的要长，建议使用Widget Inspector来诊断未来的布局问题。

以下是修复方法： 1- 这里不需要该小部件，只需将其删除即可。

Flexible(
        flex: 1, ...)

2- 将您的头像图像放入一个Container中，并设置适当的尺寸，如下所示：

Container(
  width: 50,
  height: 50,
  child: ClipOval(clipper: CircleClipper(), child: Image.asset('assets/irene.jpg')),
)

最后，这是更新后的完整代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

    void main() {
      SystemChrome.setEnabledSystemUIOverlays([]);
      runApp(MyApp());
    }

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Clock',
          theme: ThemeData(primaryColor: Colors.blue),
          home: Social(),
          debugShowCheckedModeBanner: false,
        );
      }
    }

    class Social extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(backgroundColor: Colors.white, elevation: 0.0),
          backgroundColor: Colors.white,
          body: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    width: 50,
                    height: 50,
                    child: ClipOval(clipper: CircleClipper(), child: Image.asset('assets/irene.jpg')),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 8.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Align(
                              alignment: Alignment.centerLeft,
                              child: Text('Irene',
                                  style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 15.0))),
                          Align(alignment: Alignment.centerLeft, child: Text('Yesterday, Ney York'))
                        ],
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topRight,
                    child: IconButton(
                      color: Theme.of(context).primaryColor,
                      icon: Icon(Icons.menu),
                      onPressed: () {},
                    ),
                  )
                ],
              ),
              Container(
                width: MediaQuery.of(context).size.width / 1.1,
                height: MediaQuery.of(context).size.height / 2,
                child: Card(
                  child: Image.asset('assets/irene.jpg'),
                  color: Colors.white,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
                  elevation: 10.0,
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 30.0, right: 30.0, top: 15.0),
                child: Row(
                  children: <Widget>[
                    Icon(Icons.thumb_up, color: Colors.black),
                    SizedBox(
                      width: 20.0,
                    ),
                    Icon(Icons.chat, color: Colors.black),
                    Expanded(child: Container()),
                    Icon(Icons.share, color: Colors.black),
                  ],
                ),
              ),
              Expanded(child: Container()),
            ],
          ),
        );
      }
    }

- Tarek360