Flutter - Scrollable Container

Question

I have an app that has a listview of images(places) then when tapped, returns a new page displaying certain details about the place. My concern is about the details page, my layout is I have an image on top, some text below it and an expanded list view. What I want is that I can scroll thru whole page. What I came up with is that only the expanded list view is scrollable.

Here is the code for the details page:

 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]);
        }
    }
)