时间戳

首页 > 解决方案 > 如何使用根据相对约束调整其大小的卡片创建 ListView？

android - 如何使用根据相对约束调整其大小的卡片创建 ListView？

问题描述

我正在利用FractionallySizedBox它执行相对大小调整的能力。
现在它返回到ListView.builder，但我也尝试将它作为Card小部件的包装器（将其作为主小部件返回到ListView.builder），我尝试将它作为子小部件返回GestureDetector到m 希望得到，即 3 或 n 张卡片，占据它们所在容器的 n%，而无需手动设置固定大小。

我应该如何正确使用Widget？

根据当前配置，我收到错误：

The following RenderObject was being processed when the exception was fired: RenderFractionallySizedOverflowBox#d0391

因为：

  constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)

同样的错误，高度为无穷大，当我放在FractionallySizedBox其他地方（如上所述）时也会出现，即使包含在大小清晰的小部件中也是如此。

这是我的State课：

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ListView.builder(
          itemCount: 3,
          itemBuilder: (context, i) {
            return FractionallySizedBox(
              heightFactor: .3,
              widthFactor: .8,
              child: Card(
                elevation: 10,
                child: Row(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.all(10.0),
                      child: GestureDetector(
                        onTap: () {
                          print("tapped");
                        },
                        child: Container(
                          width: 100.0,
                          height: 100.00,
                          decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius:
                                BorderRadius.all(Radius.circular(75.0)),
                            boxShadow: [
                              BoxShadow(blurRadius: 7.0, color: Colors.black)
                            ],
                          ),
                        ),
                      ),
                    ),
                ),
              ),
            );
          },
        ),
      ),
    );
}

这是所需的输出：

期望的输出

标签： androidflutterflutter-layout

解决方案

FractionallySizedBox 不能与列表视图一起使用，因为它具有 Infinite hight 和 FractionallySizedBox 带父母的高度摩擦，所以它会给您带来 Infinite hight 问题。

您可以通过以下方式使用 Container 代替它。

  child: ListView.builder(
          itemCount: 3,
          itemBuilder: (context, i) {
            // replace with container
            // keep 0.29 fraction to avoid scroll  
            return Container(
              height: MediaQuery.of(context).size.height * 0.29,
              width: MediaQuery.of(context).size.width * 0.8,
              child: Card(
                elevation: 10,
                child: Row(children: <Widget>[

推荐阅读