flutter - 如何使用灵活且可扩展的小部件布局单元格

Question

我正在尝试在颤动中布局一个单元格，并且如果没有大量硬编码的填充，就无法将它们隔开。下图是布局的方式，以及我想要的方式。

在单元格中使用可扩展或灵活的布局，我不断得到没有单元格的空白屏幕。它们似乎在不可滚动的布局上运行良好。

当前的

想

 @override
  Widget build(BuildContext context) {
    Constants constants = Constants.of(context);

    return Container(
      constraints: BoxConstraints.tightFor(height: constants.d200),
      margin: EdgeInsets.all(10.0),
      child: Card(
        color: constants.white,
        child: Column(
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  color: constants.white,
                  child: Text(product.name,
                      style: TextStyle(
                          fontWeight: FontWeight.normal,
                          color: constants.orange)),
                ),
                SizedBox(
                  height: constants.d10,
                ),
                Container(
                  color: constants.white,
                  child: Text(product.ean,
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: constants.black)),
                ),
                Container(
                  color: constants.white,
                  child: Icon(
                    Icons.ac_unit,
                    size: 10,
                    color: constants.orange,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

Answer 1

一种方法。

例如代码：

@override
  Widget build(BuildContext context) {
//    Constants constants = Constants.of(context);

    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: SizedBox(
          width: 250.0,
          child: Card(
            color: Colors.white,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    color: Colors.white,
                    child: RaisedButton(
                      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      shape: RoundedRectangleBorder(
                          side: BorderSide(color: Colors.black)),
                      onPressed: null,
                      disabledColor: Colors.white,
                      child: Text('20 EUR',
                          style: TextStyle(
                              fontWeight: FontWeight.normal,
                              color: Colors.black)),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: RaisedButton(
                    onPressed: null,
                    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    shape: RoundedRectangleBorder(
                        side: BorderSide(color: Colors.black)),
                    disabledColor: Colors.white,
                    child: Text('75546DRE4263',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.orange,
                        )),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    children: <Widget>[
                      Expanded(
                        child: RaisedButton(
                          onPressed: null,
                          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                          shape: RoundedRectangleBorder(
                              side: BorderSide(color: Colors.black)),
                          disabledColor: Colors.white,
                          child: Icon(
                            Icons.ac_unit,
                            size: 10,
                            color: Colors.orange,
                          ),
                        ),
                      ),
                      SizedBox(
                        width: 5.0,
                      ),
                      Expanded(
                        child: RaisedButton(
                          onPressed: null,
                          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                          disabledColor: Colors.white,
                          shape: RoundedRectangleBorder(
                              side: BorderSide(color: Colors.black)),
                          child: Text('Hint',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.black,
                              )),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

输出：