flutter - 如何使卡片内容可滚动?
问题描述
我正在为我的 Flutter 演示应用程序创建一个“简单”布局,但我遇到了布局问题。
布局由具有 2 个子项的 Column 组成。这些孩子正在使用 Card 小部件。
第一张卡片显示没有任何问题,但第二张卡片出现溢出错误The overflowing RenderFlex has an orientation of Axis.vertical.
并在第二张卡片底部显示黑色和黄色警告。如何使第二张卡片可滚动?特别是任务标题下的内容?
我已经尝试过使用 ListView Widget,SingleChildScrollView Widget 也没有成功,总是有错误。还检查了 flutter.dev 上的 Widget Srolling 文档页面,但不知道要使用什么......
这是没有 ListView 或 SingleChildScrollView 的代码,简单的小部件:(它grouped_buttons: ^1.0.4
在pubspec.yml中使用)
import 'package:flutter/material.dart';
import 'package:grouped_buttons/grouped_buttons.dart';
class HomePage extends StatefulWidget {
String username = "Paris";
HomePage({Key key, @required this.username}) : super(key: key);
@override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text('Demo'),
),
body: new Container(
child: homeLayout(widget.username),
),
);
}
}
class _WeatherCard extends StatefulWidget {
final String username;
_WeatherCard({Key key, @required this.username}) : super(key: key);
@override
_WeatherCardState createState() {
return new _WeatherCardState();
}
}
class _WeatherCardState extends State<_WeatherCard> {
@override
Widget build(BuildContext context) {
return new Card(
child: new Container(
margin: const EdgeInsets.only(top: 10.0, bottom: 10.0),
child: new Column(
children: <Widget>[
new Text(
widget.username,
style: new TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.w300,
),
),
new Text(
'July 29th 2019',
style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w300,
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Sunny',
style: new TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w300,
),
),
new Text(
' 24°C',
style: new TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w300,
),
),
],
)
],
),
),
);
}
}
class _TasksCard extends StatefulWidget {
@override
_TasksCardState createState() {
return new _TasksCardState();
}
}
class _TasksCardState extends State<_TasksCard> {
@override
Widget build(BuildContext context) {
return new Card(
child: new Container(
margin: const EdgeInsets.only(top: 10.0, bottom: 10.0),
child: new Column(
children: <Widget>[
new Text(
'Tasks',
style: new TextStyle(
fontSize: 26.0,
),
),
new Row(
children: <Widget>[
new Expanded(child: new Divider()),
],
),
new CheckboxGroup(
labels: <String>[
"Task 1",
"Task 2",
"Task 3",
"Task 4",
"Task 5",
"Task 6",
"Task 7",
"Task 8",
"Task 9",
"Task 10",
"Task 11",
"Task 12",
"Task 13",
"Task 14",
"Task 15",
"Task 16",
"Task 17",
"Task 18",
"Task 19",
"Task 20",
"Task 21",
],
onChange: (bool isChecked, String label, int index) =>
print("isChecked: $isChecked label: $label index: $index"),
onSelected: (List<String> checked) =>
print("checked: ${checked.toString()}"),
),
],
),
),
);
}
}
@override
Widget homeLayout(username) {
return new Container(
padding: const EdgeInsets.symmetric(
vertical: 5.0,
horizontal: 5.0,
),
child: new Column(
children: <Widget>[
new _WeatherCard(username: username),
new Expanded(
child: new _TasksCard(),
),
],
),
);
}
任务列表应该是可滚动的。也许我认为布局类型错误?
解决方案
它很简单——在你的代码中——在课堂_TasksCard
上。
编辑代码如下:
......
Expanded(
child: SingleChildScrollView(
child: new CheckboxGroup(
labels: <String>[
"Task 1",
"Task 2",
.....
推荐阅读
- reactjs - 如何在反应js中删除jspdf pdf的空格
- python - 为什么 Numpy 矩阵在分配时会忽略 demicals?
- azure - R 的 Azuremlsdk 在解决环境时挂起更新
- reactjs - 如何在点击功能上执行以在反应中显示来自搜索栏的过滤结果
- python - 包含模板标签和表单的渲染问题
- java - Spring SOAP WS:实现 SimplePasswordValidationCallbackHandler 的 WssSoapFaultException
- regex - 用于查找多行的正则表达式
- terraform - 在 minikube 上使用带有 helm 的 terraform 会出错
- mongodb - 嵌入文档中的 Strapi mongodb 项目特定字段
- java - Dubbo升级3.0后consumer无法通过zookeeper连接provider