Flutter Overflow widget picture
我想设计一个小部件的ListVIEw,每个小部件都有一个存储信息的容器.我尝试使用ListVIEw,但是容器没有出现在屏幕上,所以我切换到Row,它们出现了,但是它们不能超过容器的最大宽度.您能建议如何管理图片中的ListVIEw吗?
这是我的代码:
class NewsPage extends StatelessWidget {@overrIDeWidget build(BuildContext context) {Widget buildbuttonscore= Container( height: 100.0, wIDth: 100.0, decoration: Boxdecoration(borderRadius: borderRadius.circular(20.0),color: colors.white), child: Flatbutton( padding: EdgeInsets.only(top: 20.0), child: Column( // Replace with a Row for horizontal icon + text children: <Widget>[ Iconbutton( icon: Icon(Icons.add_circle_outline,size: 30.0,color: colors.blue), onpressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => PointPage() ) ); } ), Text("Đặt hàng",style: TextStyle(color: colors.black),) ], ), ),);Widget buildbuttonOrder= Container( height: 100.0, wIDth: 100.0, decoration: Boxdecoration(borderRadius: borderRadius.circular(20.0),color: colors.white), child: Flatbutton( padding: EdgeInsets.only(top: 20.0), child: Column( // Replace with a Row for horizontal icon + text children: <Widget>[ Iconbutton( icon: Icon(Icons.shopPing_cart,size: 30.0,color: colors.blue), onpressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => PointPage() ) ); } ), Text("Đặt hàng",style: TextStyle(color: colors.black),) ], ), ),);Widget buildbuttonPurse = Container( height: 100.0, wIDth: 100.0, decoration: Boxdecoration(borderRadius: borderRadius.circular(20.0),color: colors.white), child: Flatbutton( padding: EdgeInsets.only(top: 20.0), child: Column( // Replace with a Row for horizontal icon + text children: <Widget>[ Iconbutton( icon: Icon(Icons.monetization_on,size: 30.0,color: colors.blue), onpressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => PointPage() ) ); } ), Text("Ví tiền",style: TextStyle(color: colors.black),) ], ), ),);//button ColumnWidget buttonRow = Container( padding: const EdgeInsets.only(bottom: 10.0), margin: EdgeInsets.symmetric(vertical: 10.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ buildbuttonscore, buildbuttonOrder, buildbuttonPurse, ], ),);//OFFERROWWidget offer1 = Container( height: 150.0, wIDth: 180.0, decoration: Boxdecoration(borderRadius: borderRadius.circular(20.0),color: colors.white30), child: Flatbutton( padding: EdgeInsets.only(top: 0.0), child: Column( children: <Widget>[ new Image.asset('images/Q.png',height: 90.0,fit: BoxFit.fitWIDth,wIDth: 180.0,), Text("Các cô gái đẹp đang chờ bạn đó!!!",style: TextStyle(color: colors.black),) ], ), ),);Widget offer2 = Container( height: 150.0, wIDth: 180.0, decoration: Boxdecoration(borderRadius: borderRadius.circular(20.0),color: colors.white30), child: Flatbutton( padding: EdgeInsets.only(top: 0.0), child: Column( // Replace with a Row for horizontal icon + text children: <Widget>[ new Image.asset('images/Nina.gif',height: 90.0,fit:BoxFit.fitWIDth,wIDth: 180.0,), Text("Hãy nhanh tay sở hữu vé xem phim Goddess Kiss!",style: TextStyle(color: colors.black),) ], ), ),);Widget offerRow = Row( //shrinkWrap: true, //scrollDirection: Axis.horizontal, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Row( children: [ offer1, VerticaldivIDer(), offer2, ], ), ],);Widget newsRow = Container( padding: EdgeInsets.only(top: 10.0), child: Container( color: colors.transparent, margin: EdgeInsets.symmetric(vertical: 20.0), height: 125.0, child: ListVIEw( scrollDirection: Axis.vertical, children: <Widget>[ new NewsBody(), ], ), ),);// Todo: implement buildreturn Container( child: ListVIEw( scrollDirection: Axis.vertical, children: <Widget>[ buttonRow, new Text('Dành cho bạn',style: TextStyle( FontSize: 20.0, FontWeight: FontWeight.w400),), offerRow, new Text('Tin tức',style: TextStyle( FontSize: 20.0, FontWeight: FontWeight.w400),), newsRow, ], ),);
}
}
我收到错误:
Pic1
Pic2
Pic3
Pic4
Pic5
解决方法:
使用scrollDirection:Axis.horizontal将代码添加到SingleChildScrollVIEw中,或替换为以下代码
Widget offerRow = new SingleChildScrollVIEw(scrollDirection: Axis.horizontal,child: Row( //shrinkWrap: true, //scrollDirection: Axis.horizontal, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ Row( children: [ offer1, VerticaldivIDer(), offer2, ], ), ],),);
总结 以上是内存溢出为你收集整理的android-Flutter-ListView溢出全部内容,希望文章能够帮你解决android-Flutter-ListView溢出所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)