Dart 无法在第2列上显示
我有下面的显示，数据来自JSON。但是，问题是数据始终只显示在一列上。我如何确保它是从左到右的，直到所有的数据都被填满 这是代码。正如您所看到的，我正在创建一张卡，并将其余的细节放在卡中，然后在另一个代码中循环，直到获得所有JSON细节Dart 无法在第2列上显示,dart,flutter,flutter-layout,Dart,Flutter,Flutter Layout,我有下面的显示，数据来自JSON。但是，问题是数据始终只显示在一列上。我如何确保它是从左到右的，直到所有的数据都被填满 这是代码。正如您所看到的，我正在创建一张卡，并将其余的细节放在卡中，然后在另一个代码中循环，直到获得所有JSON细节 import 'dart:async'; import 'package:flutter/material.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'pac
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:elegal_dart/models/items.dart';
import 'package:elegal_dart/services/api.dart';
class LostPage extends StatefulWidget {
@override
_LostPage createState() => new _LostPage();
}
class _LostPage extends State<LostPage> {
List<Item> _items = [];
@override
void initState() {
super.initState();
_loadLostItems();
}
_loadLostItems() async {
String fileData =
await DefaultAssetBundle.of(context).loadString("assets/items.json");
setState(() {
_items = ItemApi.allItemsFromJson(fileData);
});
print(_items.toString());
}
Widget _buildLostItems(BuildContext context, int index) {
Item item = _items[index];
return GridView.count(
shrinkWrap: true,
crossAxisCount: 2,
children: <Widget>[
Card(
child: Column(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.height / 2.5,
child: DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
item.item_DispPic),
fit: BoxFit.cover),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: FractionalOffset.topLeft,
child: CircleAvatar(
backgroundColor: Colors.redAccent,
radius: 15.0,
child: Text(
"NEW",
textScaleFactor: 0.5,
),
),
),
),
Align(
alignment: FractionalOffset.topRight,
child: Container(
color: Colors.blueAccent,
height: 35.0,
width: 35.0,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.account_circle),
Text(
"1P",
textScaleFactor: 0.5,
),
],
),
),
),
),
],
),
),
Center(
child: Container(
padding: const EdgeInsets.all(8.0),
alignment: FractionalOffset.bottomCenter,
child: Text(
"MEGADISH",
style: TextStyle(
fontWeight: FontWeight.w700,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
child: Text(
"Add To Cart",
style: TextStyle(color: Colors.grey[500]),
),
onPressed: () => null,
),
Text(
"\$5",
style: TextStyle(color: Colors.grey[500]),
)
],
)
],
),
),
],
);
}
Widget _getAppTitleWidget() {
return new Text(
'Lost Items',
style: new TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 32.0,
),
);
}
Widget _buildBody() {
return new Container(
margin: const EdgeInsets.fromLTRB(
8.0, // A left margin of 8.0
56.0, // A top margin of 56.0
8.0, // A right margin of 8.0
0.0 // A bottom margin of 0.0
),
child: new Column(
// A column widget can have several
// widgets that are placed in a top down fashion
children: <Widget>[
//_getAppTitleWidget(),
_getListViewWidget()
],
),
);
}
Future<Null> refresh() {
_loadLostItems();
return new Future<Null>.value();
}
Widget _getListViewWidget() {
return new Flexible(
child: new RefreshIndicator(
onRefresh: refresh,
child: new ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
itemCount: _items.length,
itemBuilder: _buildLostItems
)
)
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.blue,
body: _buildBody(),
);
}
}
*****参考其他解决方案***** 你能试试下面的吗？ 根据需要更新numberOfColumns
int numberOfColumns = 2;
List<Item> _items = <Item>[ ... ];
@override
Widget build(BuildContext context){
GridView gridView = new GridView.builder(
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: numberOfColumns),
itemBuilder: _buildLostItems,
itemCount: _items.length,
);
return new SafeArea(
top: false,
bottom: false,
child: new Scaffold(
appBar: new AppBar(
title: new Text('title'),
),
body: gridView,
),
);
}
_buildLostItems(BuildContext context, int index){
Item item = _items[index];
return new Card(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new Stack(
fit: StackFit.expand,
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.height / 2.5,
child: DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(item.item_DispPic),
fit: BoxFit.cover),
),
),
),
),
new Padding(
padding: const EdgeInsets.all(8.0),
child: new Align(
alignment: FractionalOffset.topLeft,
child: new CircleAvatar(
backgroundColor: Colors.redAccent,
radius: 15.0,
child: const Text(
"NEW",
textScaleFactor: 0.5,
),
),
),
),
],
),
),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new FlatButton(
child: new Text(
"Add To Cart",
style: new TextStyle(color: Colors.grey[500]),
),
onPressed: () {},
),
new Text(
"\$5",
style: new TextStyle(color: Colors.grey[500]),
)
],
),
],
),
);
}
如果我正确理解了您的目标，即显示为2列网格，我将按如下方式进行操作。 它也会滚动，这与您的代码不起作用
@override
Widget build(BuildContext context) {
return new SafeArea(
top: false,
bottom: false,
child: new Scaffold(
appBar: new AppBar(
title: _getAppTitleWidget(),
),
backgroundColor: Colors.blue,
body: _buildBody(),
),
);
}
Widget _buildBody() {
int numberOfColumns = 2;
return new Container(
padding: const EdgeInsets.all(8.0),
child: new GridView.builder(
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: numberOfColumns),
itemBuilder: _buildLostItems,
itemCount: _items.length,
),
);
}
Widget _buildLostItems(BuildContext context, int index) {
Item item = _items[index];
return new GridTile(
child: Card(
child: Column(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.height / 2.5,
child: DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
item.item_DispPic),
fit: BoxFit.cover),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: FractionalOffset.topLeft,
child: CircleAvatar(
backgroundColor: Colors.redAccent,
radius: 15.0,
child: Text(
"NEW",
textScaleFactor: 0.5,
),
),
),
),
Align(
alignment: FractionalOffset.topRight,
child: Container(
color: Colors.blueAccent,
height: 35.0,
width: 35.0,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.account_circle),
Text(
"1P",
textScaleFactor: 0.5,
),
],
),
),
),
),
],
),
),
Center(
child: Container(
padding: const EdgeInsets.all(8.0),
alignment: FractionalOffset.bottomCenter,
child: Text(
"MEGADISH",
style: TextStyle(
fontWeight: FontWeight.w700,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
child: Text(
"Add To Cart",
style: TextStyle(color: Colors.grey[500]),
),
onPressed: () => null,
),
Text(
"\$5",
style: TextStyle(color: Colors.grey[500]),
)
],
)
],
),
),
);
}
希望这能有所帮助。您好，我在_buildLostItems上看到了错误，因为只有静态成员才能在初始值设定项中初始化。在我的原始问题中还添加了完整的代码。如果错误，请纠正我这是造成所有差异的代码行吗？SliverGridDelegateWithFixedCrossAxisCountcrossAxisCount:numberOfColumns，而不仅仅是。在buildLostItems中，您还需要将卡包装成网格。