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

Flutter-可滚动容器

1 个答案: