flutter - 无法将 ListView 设置为 LayoutBuilder Widget (Flutter)

Question

我需要这样的结构

我使用 LayoutBuilder 获取内容的高度(在 App Bar 和 TabsBottomNavigation 之间)。在这里，我构建了 Profile Info Container 并想用一些 List Tiles 构建 ListView，但是当我尝试在 Layout Builder 中构建它时，我在控制台中遇到了错误。

如果我从 LayoutBuilder 中创建 ListView，它就可以工作!

请帮我解决一下。我的代码如下:

Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints viewportConstraints) {
        return SingleChildScrollView(
          child: Container(
            child: Column(
              children: <Widget>[
                Container(
                  height: viewportConstraints.maxHeight * .44,
                  color: Theme.of(context).primaryColor,
                  padding: EdgeInsets.only(bottom: 2),
                  child: Align(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        _buildProfileImage(context),
                        SizedBox(height: 17),
                        Text(userName)
                      ],
                    ),
                  ),
                ),
                Expanded(
                  child: ListView(
                    children: <Widget>[
                      ListTile(
                        leading: Icon(Icons.print),
                        title: Text('asdad'),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        );
      },
    );
  }

Answer 1

使用下面的 build 方法将适用于您的情况。 (我已经检查过并且它正在运行，所以我希望它也适用于您的情况并且符合您的要求。)

Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints viewportConstraints) {
        return Container(
          child: Column(
            children: <Widget>[
              Container(
                height: viewportConstraints.maxHeight * .44,
                color: Theme.of(context).primaryColor,
                padding: EdgeInsets.only(bottom: 2),
                child: Align(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      _buildProfileImage(context),
                      SizedBox(height: 17),
                      Text(userName),
                    ],
                  ),
                ),
              ),
              SizedBox(height: 16),
              Flexible(
                child: ListView(
                  children: <Widget>[
                    Card(
                      child: ListTile(
                        leading: Icon(Icons.print),
                        title: Text('asdad'),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }

我认为 SingleChildScrollView 在这种情况下没有用，所以我删除了它，但如果你填写的话你可以使用它。

你仍然需要根据你的意愿做一些 UI 改进，因为这是根据你的要求的基本结构。

希望对您有所帮助。