Question

我正在尝试完成布局，其中的元件被叠加覆盖，但是出现了问题。

这是我到目前为止的代码

import 'package:flutter/material.dart';

class FirstFragment extends StatelessWidget {

  _getSizes() {
  }

  _getPositions(){
  }

  @override
  Widget build(BuildContext context) {

    return new Container(
    constraints: new BoxConstraints.expand(
    height: 200.0,
    ),
    padding: new EdgeInsets.only(left: 0.0, bottom: 8.0, right: 16.0),
    decoration: new BoxDecoration(
    color: Colors.blue,
    ),
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      textDirection: TextDirection.rtl,
      children: [
        Text(
          '0.00',
          style: TextStyle(
              color: Colors.white,
              fontSize: 50.0,
              fontWeight: FontWeight.bold

          ),
        ),
        Text(
          'Current Balance',
          style: TextStyle(
              color: Colors.white,
              fontSize: 26.0,
              fontWeight: FontWeight.bold
          ),
        ),
      new Card(
        child: new Column(
          children: <Widget>[
            new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
            new Padding(
                padding: new EdgeInsets.all(7.0),
                child: new Row(
                  children: <Widget>[
                    new Padding(
                      padding: new EdgeInsets.all(7.0),
                      child: new Icon(Icons.thumb_up),
                    ),
                    new Padding(
                      padding: new EdgeInsets.all(7.0),
                      child: new Text('Like',style: new TextStyle(fontSize: 18.0),),
                    ),
                    new Padding(
                      padding: new EdgeInsets.all(7.0),
                      child: new Icon(Icons.comment),
                    ),
                    new Padding(
                      padding: new EdgeInsets.all(7.0),
                      child: new Text('Comments',style: new TextStyle(fontSize: 18.0)),
                    )

                  ],
                )
            )
          ],
        ),
      )
      ],
    )

    );
  }

}

运行代码时，您会注意到卡片视图缩小并且没有覆盖容器。我正在寻找与以下图片相同的内容：

请注意，标题为“摘要”的卡片视图如何在蓝色背景上覆盖，然后摘要卡片视图下还有其他卡片视图。

我从代码中得到以下内容。卡片视图不会像上图那样重叠。有人可以帮忙吗？预先感谢

注意：如果有人可以使我的名片视图看起来像上图的“摘要”名片视图中的视图一样，那将是很棒的。我从somewebiste复制的代码中的一个，目的是使其看起来像上面的图片

Answer 1

从您的Container

中删除关注者

constraints: new BoxConstraints.expand(
  height: 200.0,
)

将mainAxisSize: MainAxisSize.min添加到您的Column中。

new Column(
  mainAxisSize: MainAxisSize.min, // add this
  crossAxisAlignment: CrossAxisAlignment.center,
  children: ...
)

完整解决方案：

class FirstFragment extends StatelessWidget {
  _getSizes() {}

  _getPositions() {}

  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.only(left: 0.0, bottom: 8.0, right: 16.0),
      decoration: new BoxDecoration(color: Colors.blue),
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            '0.00',
            style: TextStyle(color: Colors.white, fontSize: 50.0, fontWeight: FontWeight.bold),
          ),
          Text(
            'Current Balance',
            style: TextStyle(color: Colors.white, fontSize: 26.0, fontWeight: FontWeight.bold),
          ),
          new Card(
            child: new Column(
              children: <Widget>[
                new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
                new Padding(
                    padding: new EdgeInsets.all(7.0),
                    child: new Row(
                      children: <Widget>[
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Icon(Icons.thumb_up),
                        ),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Text(
                            'Like',
                            style: new TextStyle(fontSize: 18.0),
                          ),
                        ),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Icon(Icons.comment),
                        ),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Text('Comments', style: new TextStyle(fontSize: 18.0)),
                        )
                      ],
                    ))
              ],
            ),
          )
        ],
      ),
    );
  }
}

卡片视图和布局混乱

1 个答案: