扑动中的ListView答案

【问题标题】：ListView in flutter扑动中的ListView
【发布时间】：2019-02-22 19:59:31
【问题描述】：

我们需要在列表视图中放置一列圆形边缘容器，当我将它们包装在列表视图中时它们不会显示，我是新来的，所以我确定我错过了一些东西。我添加了不滚动设计的屏幕截图，一旦我可以让列表视图工作，这些容器将动态加载并滚动。

截图

这是屏幕的代码

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

【问题讨论】：

标签： dart flutter

【解决方案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(),
        ],
      ),
    ),
    );
  }

【讨论】：