[英]ListView in flutter
我们需要在列表视图中放置一列圆形边缘容器,当我将它们包装在列表视图中时,它们不显示,这是我的新手,所以我确定我错过了一些东西。 我添加了不滚动设计的屏幕快照,这些容器将动态加载并在我可以使Listview工作时滚动。
import 'package:flutter/material.dart';
import 'package:lightbridge_mobile/ui/gradient_app_bar.dart';
import 'package:lightbridge_mobile/ui/widget_container.dart';
class WidgetsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [Color.fromRGBO(1,89,99, 1.0), Colors.grey],
begin: Alignment.bottomLeft,
end: Alignment.topRight
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
],
),
)
);
}
}
这是小部件容器的代码
class WidgetContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new WidgetRow();
}
}
这是小部件行代码
class WidgetRow extends StatelessWidget {
@override Widget build(BuildContext context) {
return new Container(
height: 160.0,
margin: const EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 24.0,
),
child: new Stack(
children: <Widget>[
widgetCard,
widgetThumbnail,
],
)
);
}
final widgetCard = new Container(
child: Row(
children: <Widget>[
],
),
height: 160.0,
margin: new EdgeInsets.only(left: 0.0),
decoration: new BoxDecoration(
color: Colors.white70.withOpacity(0.25),
shape: BoxShape.rectangle,
borderRadius: new BorderRadius.circular(8.0),
boxShadow: <BoxShadow>[
new BoxShadow(
color: Colors.black12,
blurRadius: 10.0,
offset: new Offset(0.0, 10.0),
),
],
),
);
final widgetThumbnail = new Container(
margin: new EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 10.0,
),
alignment: FractionalOffset.topLeft,
child: new Icon(
FontAwesomeIcons.comments,
size: 40.0,
color: Colors.white70,
),
);
}
而不是使用Column
-直接使用ListView
。 不要把它包起来。
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: new LinearGradient(
colors: [Color.fromRGBO(1, 89, 99, 1.0), Colors.grey],
begin: Alignment.bottomLeft,
end: Alignment.topRight)),
child: ListView(
children: <Widget>[
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
new WidgetContainer(),
],
),
),
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.