Question

我有以下显示，数据来自JSON。但是，问题是数据一直只显示在一列上。如何在所有数据填满之前确保它是从左到右？

这是代码。正如你所看到的那样，我正在创建一张卡片并在卡片中包含其余的细节，然后在另一段代码中我循环，直到我拥有所有JSON细节。

   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(),
    );
  }
}

Answer 1

我按照以下方式工作（如果我理解你的目标是显示为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]),
                    )
                  ],
                )
              ],
            ),
          ),
    );
  }

这是输出：

希望这有帮助。

Answer 2

*****请参阅其他解决方案*****

你可以试试以下吗？根据需要更新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列上显示

2 个答案: