Flutter - 可滚动容器

Question

我有一个应用程序，其中包含图像（地点）的列表视图，然后在点击时返回一个新页面，显示有关该地点的某些详细信息。我关心的是详细信息页面，我的布局是顶部有一个图像，下面有一些文本和一个扩展的列表视图。我想要的是我可以滚动整个页面。我想出的是只有扩展的列表视图是可滚动的。

这是详情页的代码：

 import 'package:flutter/material.dart';
    import 'package:craglist/cragspot.dart';

 class CragDetailsScreen extends StatelessWidget {
  final CragLocation loc;

  final _placeTitleStyle = const TextStyle(
      fontSize: 40.0, fontWeight: FontWeight.bold, color: Colors.black);

  CragDetailsScreen(this.loc);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Details"),
      ),
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Container(
            height: 300.0,
            decoration: new BoxDecoration(
              image: new DecorationImage(
                fit: BoxFit.cover,
                image: new AssetImage(loc.placeImage),
              ),
            ),
          ),
          new Padding(
            padding: const EdgeInsets.all(8.0),
            child: new Text(
              loc.name,
              style: _placeTitleStyle,
            ),
          ),
          new Padding(
            padding: const EdgeInsets.only(left: 8.0),
            child: new Text(
              loc.desc,
            ),
          ),
          new Padding(
            padding: const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 0.0),
            child: new Divider(
              height: 15.0,
            ),
          ),
          new Padding(
            padding: const EdgeInsets.only(left: 8.0, right: 8.0),
            child: new Text(
              "Crags",
              style: _placeTitleStyle,
            ),
          ),
          new Expanded(child: _buildCragList()),
        ],
      ),
    );
  }

  Widget _buildCragList() {
    return new ListView.builder(
        itemCount: loc.crag.length,
        itemBuilder: (context, i) {
          return _buildRow(loc.crag[i]);
        });
  }

  Widget _buildRow(Crag crag) {
    List<Widget> widcrag = [];

    crag.routes.forEach((f) {
      widcrag.add(
        new ListTile(
          dense: true,
          title: new Text(f.name),
          trailing: new Text(f.grade),
        ),
      );
    });

    return new ExpansionTile(
      title: new Text(crag.name),
      children: widcrag,
    );
  }
}

另外 - 当我滚动图像时是否有可能调整大小？为展开的列表视图在屏幕上提供更多空间。

Answer 1

您可以将所有内容包装在 ListView.builder 中，然后添加一个 if 语句以确定它是否在第一个小部件上工作。如果它在第一个小部件中，它会添加所有应该在顶部的内容。如果不是，它会添加索引为 +1 的普通列表项。像这样的：

new ListView.builder(
    itemCount: loc.crag.length,
    itemBuilder: (context, index) {
        int i = index;
        if (i == 0) {
            return new Column(children: <Widget>[
            new Container(
                height: 300.0,
                decoration: new BoxDecoration(
                image: new DecorationImage(
                    fit: BoxFit.cover,
                    image: new AssetImage(loc.placeImage),
                ),
                ),
            ),
            new Padding(
                padding: const EdgeInsets.all(8.0),
                child: new Text(
                loc.name,
                style: _placeTitleStyle,
                ),
            ),
            new Padding(
                padding: const EdgeInsets.only(left: 8.0),
                child: new Text(
                loc.desc,
                ),
            ),
            new Padding(
                padding: const EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 0.0),
                child: new Divider(
                height: 15.0,
                ),
            ),
            new Padding(
                padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                child: new Text(
                "Crags",
                style: _placeTitleStyle,
                ),
            ),
            ],);
        } else {
            _buildRow(loc.crag[i+1]);
        }
    }
)