颤抖的ListView

时间:2019-02-22 19:59:32

标签: dart flutter

我们需要在列表视图中放置一列圆形容器,当我将它们包装在列表视图中时,它们不显示,这是我的新手,所以我确定我错过了一些东西。我添加了不滚动设计的屏幕快照,这些容器将动态加载并在我可以使Listview工作后滚动。

屏幕截图

screen

这是屏幕的代码

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

1 个答案:

答案 0 :(得分:1)

直接使用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(),
        ],
      ),
    ),
    );
  }