颤动 – 在一个屏幕上显示两个ListView

我正在尝试在另一个垂直listView.builder之上添加一个水平listView.builder 。 两个listViews都应该包含两个text 。

这是我到目前为止所做的， 只 绘制 了顶部水平 listView.builder ，当我尝试单击底部垂直listView.builder应该绘制的位置时，应用程序在调试中崩溃并且我收到错误： NoSuchMethodError: The getter 'visible' was called on null.

另外，我不知道如何添加两个text字段，所以我把它们遗漏了。

我有很多代码，如果你需要查看更多代码，请在这里填写

 Widget _cryptoWidget() { return new Container( child: new Column( children: [ new Flexible( child: new ListView.builder( scrollDirection: Axis.horizontal, itemBuilder: (BuildContext context, int index) { return _listViewFiller(); } ), ), new Flexible( child: new RefreshIndicator( key: refreshKey, child: new ListView.builder( scrollDirection: Axis.horizontal, itemCount: _currencies.length, itemBuilder: (BuildContext context, int index) { final int i = index ~/ 2; final Crypto currency = _currencies[i]; final MaterialColor color = _colors[i % _colors.length]; if (index.isOdd) { return new Divider(); } return _getListItemUi(currency, color); }, ), onRefresh:refreshList, ), ) ], ) ); } 

Answer 1

 import 'package:flutter/material.dart'; import 'background.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), debugShowCheckedModeBanner: false, home: new MyHomePage(title: 'Popular'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State { List items = [ "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8" ]; @override Widget build(BuildContext context) { final _width = MediaQuery.of(context).size.width; final _height = MediaQuery.of(context).size.height; final headerList = new ListView.builder( itemBuilder: (context, index) { EdgeInsets padding = index == 0?const EdgeInsets.only( left: 20.0, right: 10.0, top: 4.0, bottom: 30.0):const EdgeInsets.only( left: 10.0, right: 10.0, top: 4.0, bottom: 30.0); return new Padding( padding: padding, child: new InkWell( onTap: () { print('Card selected'); }, child: new Container( decoration: new BoxDecoration( borderRadius: new BorderRadius.circular(10.0), color: Colors.lightGreen, boxShadow: [ new BoxShadow( color: Colors.black.withAlpha(70), offset: const Offset(3.0, 10.0), blurRadius: 15.0) ], image: new DecorationImage( image: new ExactAssetImage( 'assets/img_${index%items.length}.jpg'), fit: BoxFit.fitHeight, ), ), // height: 200.0, width: 200.0, child: new Stack( children: [ new Align( alignment: Alignment.bottomCenter, child: new Container( decoration: new BoxDecoration( color: const Color(0xFF273A48), borderRadius: new BorderRadius.only( bottomLeft: new Radius.circular(10.0), bottomRight: new Radius.circular(10.0))), height: 30.0, child: new Row( mainAxisAlignment: MainAxisAlignment.center, children: [ new Text( '${items[index%items.length]}', style: new TextStyle(color: Colors.white), ) ], )), ) ], ), ), ), ); }, scrollDirection: Axis.horizontal, itemCount: items.length, ); final body = new Scaffold( appBar: new AppBar( title: new Text(widget.title), elevation: 0.0, backgroundColor: Colors.transparent, actions: [ new IconButton(icon: new Icon(Icons.shopping_cart, color: Colors.white,), onPressed: (){}) ], ), backgroundColor: Colors.transparent, body: new Container( child: new Stack( children: [ new Padding( padding: new EdgeInsets.only(top: 10.0), child: new Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.start, children: [ new Align( alignment: Alignment.centerLeft, child: new Padding( padding: new EdgeInsets.only(left: 8.0), child: new Text( 'Recent Items', style: new TextStyle(color: Colors.white70), )), ), new Container( height: 300.0, width: _width, child: headerList), new Expanded(child: ListView.builder(itemBuilder: (context, index) { return new ListTile( title: new Column( children: [ new Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ new Container( height: 72.0, width: 72.0, decoration: new BoxDecoration( color: Colors.lightGreen, boxShadow: [ new BoxShadow( color: Colors.black.withAlpha(70), offset: const Offset(2.0, 2.0), blurRadius: 2.0) ], borderRadius: new BorderRadius.all( new Radius.circular(12.0)), image: new DecorationImage( image: new ExactAssetImage( 'assets/img_${index%items.length}.jpg', ), fit: BoxFit.cover, )), ), new SizedBox( width: 8.0, ), new Expanded( child: new Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ new Text( 'My item header', style: new TextStyle( fontSize: 14.0, color: Colors.black87, fontWeight: FontWeight.bold), ), new Text( 'Item Subheader goes here\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry', style: new TextStyle( fontSize: 12.0, color: Colors.black54, fontWeight: FontWeight.normal), ) ], )), new Icon( Icons.shopping_cart, color: const Color(0xFF273A48), ) ], ), new Divider(), ], ), ); })) ], ), ), ], ), ), ); return new Container( decoration: new BoxDecoration( color: const Color(0xFF273A48), ), child: new Stack( children: [ new CustomPaint( size: new Size(_width, _height), painter: new Background(), ), body, ], ), ); 

}}

这里有完整源代码的一个非常好的例子样式列表

Answer 2

这可能不是最干净的方法，但我相对较新，因为这是我能做的最好的事情。

首先，我创建了一个主container来传递所有信息，因此我可以将所有相关代码保存在他们受尊重的地方，这件事允许我在同一个container显示两个listViews

这是传递给_positonalArguments的containers _positonalArguments 。 这让我可以防止元素溢出，例如maxHeight: 335.0,是由于试验和错误而找到的严格参数。

我在传递给_positionalArguments两个容器中使用了相同的BoxConstraints ，以及相同的margin值。

最后，我留下了一个成功的渲染，如下图所示。

对不起，我正在使用图片而不是粘贴代码，我在手机上使用堆栈来回答这个问题。