我正在尝试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, ), ) ], ) ); }
小智.. 14
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, ], ), );
}}
这里有完整源代码的一个非常好的例子 样式列表
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, ], ), );
}}
这里有完整源代码的一个非常好的例子 样式列表