杂货 - 在一个屏幕上显示两个listViews
问题描述 投票：0回答：3
listView.builder。两者都应该在两者上都有
listViews这是我到目前为止所做的，只是当我尝试单击应该绘制的bottom
垂直
text的位置时，该应用程序在DEBUG中崩溃时我得到了错误：
listView.builder
，我也不知道如何添加两个listView.builder
字段，所以我把它们遗漏了。 我有很多代码，如果您需要查看更多代码，请这样做
NoSuchMethodError: The getter 'visible' was called on null.
text非常好的示例，在这里使用完整的源代码
风格的列表this示例代码显示了两个页面中的两个listView垂直方向，两个lisview数据均来自API 我分别设计了一个ListItem小部件或模板（ListItemPosts）。
Widget _cryptoWidget() {
return new Container(
child: new Column(
children: <Widget>[
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,
),
)
],
)
);
}
3个回答
投票
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<MyHomePage> {
List<String> 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: <Widget>[
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: <Widget>[
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: <Widget>[
new IconButton(icon: new Icon(Icons.shopping_cart, color: Colors.white,), onPressed: (){})
],
),
backgroundColor: Colors.transparent,
body: new Container(
child: new Stack(
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: 10.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
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: <Widget>[
new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
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: <Widget>[
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: <Widget>[
new CustomPaint(
size: new Size(_width, _height),
painter: new Background(),
),
body,
],
),
);
}
}
这可能不是最清洁的方法，但是我对扑朔迷离，所以这是我能做的最好的。
首先，我创建了一个主人body: ListView(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 10.0),
new Container(
margin: EdgeInsets.only(left: 10.0,right: 10.0),
height: 40.0, width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: Colors.green.withOpacity(0.25)
),
child:Padding(
padding: const EdgeInsets.only(left: 15.0,right: 15.0,top: 8.0),
child: Text(
'Invoiced Products',
style: TextStyle(
fontFamily: 'Quicksand',
fontSize: 20.0,
color: Colors.green,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
),
SizedBox(height: 5.0),
FutureBuilder<List<SalesOrder>>(
future: fetchstring(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData ? ListItemPosts(
items: snapshot.data)
: Center(child: CircularProgressIndicator());
},
),
SizedBox(height: 10.0)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 10.0),
new Container(
margin: EdgeInsets.only(left:10.0,right: 10.0),
height: 40.0, width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: Colors.red.withOpacity(0.25)
),
child:Padding(
padding: const EdgeInsets.only(left: 15.0,right: 15.0,top: 8.0),
child: Text(
'Pending Products',
style: TextStyle(
fontFamily: 'Quicksand',
fontSize: 20.0,
color: Colors.red,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
),
SizedBox(height: 5.0),
FutureBuilder<List<SalesOrder>>(
future: fetchstring(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData ? ListItemPosts(
items: snapshot.data)
: Center(child: CircularProgressIndicator());
},
),
SizedBox(height: 10.0)
],
)
],
)
class ListItemPosts extends StatelessWidget {
final List<SalesOrder> items;
ListItemPosts({Key key, this.items}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: new ListView.builder(
itemCount: items[0].sodetails.length,
primary: false,
shrinkWrap: true,
itemBuilder: (BuildContext context, int position) {
return new Column(
children: <Widget>[
Divider(height: 5.0),
listItem(your Data can pass),
],
);
})
);
}
}
Widget listItem(Get the data ) {
return Container(
height: 125.0,
width: double.infinity,
margin: EdgeInsets.only(left: 10.0,right: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
color: Colors.white,
),
child:
Row(
children: <Widget>[
/*Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
image:
DecorationImage(image: AssetImage(imagedata))),
height: 100.0,
width: 80.0,
),*/
SizedBox(width: 0.0),
Container(
width: MediaQuery.of(context).size.width -30.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(child:
Text(
imagename,
textAlign: TextAlign.left,
softWrap: false,
style: TextStyle(fontFamily: 'Quicksand',fontSize: 14.0,color: Colors.black),
)),
SizedBox(height: 5.0),
Flexible(child:
Text(
trim.stringtrim(imagedes),
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: TextStyle(fontFamily: 'Quicksand',fontSize: 12.0,color: Colors.black45),
),
),
SizedBox(height: 5.0),
Text(
'Price: '+Price.toString(),
style: TextStyle(fontFamily: 'Quicksand'),
),
SizedBox(height: 5.0),
Text(
'Qty: '+Quatity.toString(),
style: TextStyle(fontFamily: 'Quicksand'),
),
SizedBox(height: 5.0),
Container(
height: 2.0,
width: 100.0,
color: Colors.amber,
),
],
),
],
),
),
],
),
);
}
投票
这是传递给
container的其中之一。这使我可以防止元素溢出，例如，由于反复试验和错误而发现了一个严格的参数。I在传递给
listViews
container投票
，我正在使用图像而不是粘贴代码，我正在使用手机上的堆栈来回答此问题。
_positonalArguments
最新问题
- 评估度量标准将适用于数据集不平衡的分类问题？
- 在Google Play商店中没有启用“发送供审核”的“发送应用程序” 我已经填写了Google Play内部测试的所有必需信息，但仍未启用“发送应用程序”按钮。 如何解决此问题？ 我感谢任何Hel ...
- 为什么运行laravel应用程序使用docker/sail我得到的属性版本是过时的？
- 有一个可召唤的可用于使用`pytest.fixture（param = ...）生成ID的可呼叫。 我使用参数化的灯具，但我找不到ID的实用方法。 我想回到使用pytest.mark.parametrize时生成的方式。 我已经看到这是可能的...
- 我在我的春季靴子3.2.2/vaadin 24.6.6应用程序中遇到持久性
- 我正在与SQL Server 2019合作，并拥有一个基于类别列表来检索产品的TVF。但是，我注意到当我使用Select *时，查询会导致表扫描，而选择特定的索引列会导致索引寻求，从而带来更好的性能。 我需要继续使用选择 *，因为此功能用于需要不同列的多个区域。此外，强迫索引不是一个选择，因为结果可能在TVF之外进行分类，并且在这种情况下强迫索引可能会降低性能。
- azure函数应用列表不返回函数
- 和selectable.razor.cs： 使用Microsoft.
- GoogleChrome开发人员工具：搜索精确匹配
- 线图上的多个线路bislicer
- 如何将Zipkinspanexporter替换为我自己的Spring Boot应用程序？
- 如何在c？
- QUEACT本地flexbox
- <code>abc</code>
- 我如何在swiftui中藏匿和显示标签栏？
- 如何仅在成功与Socat连接的TCP连接之后执行脚本？ 我使用SOCAT与远程主机建立了TCP连接，我只想在连接成功建立后才执行脚本（即，连接Syscall返回successL ...
- 如何获得内部存储大小，包括在Android（Kotlin）中使用系统使用情况？ 我在Kotlin开发文件管理器应用程序，我需要检索内部存储的总大小，包括系统所占用的空间。 我尝试使用Statfs类： val stat = ...
- SvelteonMount方法不等待等待
- Microsoftazuresql
- 没有人知道我无法做出的Azure Databricks Workspace是什么问题？ 我正在尝试访问我的工作空间，但昨天和它的工作正常都无法打开。它让我毫无问题地进入另一个工作空间，但是我无法进入...