Question

编码和学习 Flutter 的超级新手。

尝试在 Flutter 中为将调用云端数据的应用程序的新闻源做一个模板帖子。

dart 代码中没有标记错误，但在运行时返回“垂直视口的高度没有限制。”。代码如下。Only appbar appears. body always blank

class Post extends StatelessWidget {
  final Post post;
  Post({newsfeed.post});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Card(
          elevation: 8.0,
          shadowColor: Colors.grey,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
          child: ListView(
            padding: const EdgeInsets.all(10.0),
            children: <Widget>[
              Row(
                children: [
                  Container(
                    child: ListTile(
                      leading: CircleAvatar(
                        radius: 20.0,
                        backgroundImage: NetworkImage(post.userimage),
                      ),
                      title: Text(
                        post.username,
                      ),
                      subtitle: Text("Post Date"),
                      trailing:
                          Icon(Icons.more_vert, color: Colors.purple[600]),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 10.0),
              Row(children: [
                Container(
                  width: 250.0,
                  height: 200.0,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover, image: NetworkImage(post.postimage)),
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                  ),
                ),
                SizedBox(height: 10.0),
                Row(
                  children: [
                    Icon(Icons.textcomment, color: Colors.purple[600]),
                    Text(post.intcomments.toString()),
                    SizedBox(width: 20),
                    Icon(Icons.favorite, color: Colors.purple[600]),
                    SizedBox(width: 20),
                    Text(post.intlikes.toString()),
                  ],
                ),
                SizedBox(height: 10.0),
              ]),
            ],
          ),
        ),
      ],
    );
  }
}

Answer 1

通过在 ListTile 处设置宽度并将 ListView 替换为 Card 上的列将解决此问题。在网络上使用网络图像时，请尝试使用 specific render option 之类的 flutter run -d c --web-renderer html

检查这个解决方案[更新]

import 'package:flutter/material.dart';

class Post extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) => SingleChildScrollView(
        child: Column(
          children: [
            columnItem(constraints),
            columnItem(constraints),
            columnItem(constraints),
            columnItem(constraints),
          ],
        ),
      ),
    );
  }

  Card columnItem(BoxConstraints constraints) {
    return Card(
      elevation: 8.0,
      shadowColor: Colors.grey,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(
          20.0,
        ),
      ),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                //removing extra padding
                width: constraints.maxWidth - 30,
                child: ListTile(
                  leading: CircleAvatar(
                    ///for netWork
                    radius: 20,
                    backgroundImage: NetworkImage(
                      "https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg",
                    ),
                  ),
                  title: Text(
                    "Name here ",
                  ),
                  subtitle: Text("Post Date"),
                  trailing: Icon(Icons.more_vert, color: Colors.purple[600]),
                ),
              ),
            ],
          ),
          SizedBox(height: 10.0),
          Row(
            children: [
              Container(
                width: 250.0,
                height: 200.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage("assets/image.jpg"),
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(10.0)),
                ),
              ),
              SizedBox(height: 10.0),
              Row(
                children: [
                  Icon(Icons.ac_unit, color: Colors.purple[600]),
                  Text("heiya "),
                  SizedBox(width: 20),
                  Icon(Icons.favorite, color: Colors.purple[600]),
                  SizedBox(width: 20),
                  Text("hi asddddddddddda"),
                ],
              ),
              SizedBox(height: 10.0),
            ],
          ),
        ],
      ),
    );
  }
}

颤振：在 performResize() 期间抛出以下断言：垂直视口被赋予无限高度

1 个答案: