dart - flutter 中的 ListView

Question

我们需要在 ListView 中放置一列圆边容器，当我将它们包装在 ListView 中时它们不会显示，我是 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,
             ),
    );
  }

Answer 1

直接使用 ListView 而不是 Column。不要包裹它。

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