flutter - Flutter - Scrollable Container
问题描述
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,
);
}
}
Also additional - Is it possible that when I scroll the image resizes? To give the expanded list view more space on the screen.
解决方案
您可以将所有内容包装在 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]);
}
}
)
推荐阅读
- javascript - ref 和全局变量有什么区别?
- sql - SQL - 增量案例语句 - 队列分析
- android - Android线性布局使高度适应元素
- angular - 如何在 Angular Ag Grid 中测试 AgRendererComponent 组件
- php - 在 PHP 中解析多维关联数组
- ios - 使用 TabView 时导致“AttributeGraph 前置条件失败”的原因是什么?
- winforms - Graphics.DrawString() 方法在字符串长度过长时抛出 GDI+ 异常
- python - 我写了一个简单的 atm 机器程序,但有些输入会导致 0.01 的差异。代码有什么问题?(初学者)
- c++ - WinRT 剪贴板历史记录是否仅支持文本和图像?
- kubernetes - 如何将数据从 Google Cloud VM 迁移到 Google Kubernetes Engine?