flutter - Flutter 中的卡片视图和布局

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 复制的，目的是让它看起来像上面的图片

标签： flutterflutter-layout

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)),
                        )
                      ],
                    ))
              ],
            ),
          )
        ],
      ),
    );
  }
}