Question

所以我有这个脚本可以建立一个列表视图

class NewProductsLists extends StatelessWidget {
  final List<NewProducts> newlist;

  NewProductsLists({Key key, this.newlist}) : super(key: key);
  final formatCurrency =
  new NumberFormat.simpleCurrency(locale: "id", decimalDigits: 2);
  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: ListView.builder(
            itemCount: newlist.length,
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                onTap: () {
                  print("Product detail");
                },
                child: Card(
                  child: Container(
                      width: MediaQuery.of(context).size.width * 0.50,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Image.network(
                              Configuration.url +
                                  "assets/app_assets/" +
                                  newlist[index].productImage,
                              width: 90,
                              height: 90,
                              filterQuality: FilterQuality.low),
                          ListTile(
                            title: Center(
                                child: Text(
                                  newlist[index].productName,
                                  style: TextStyle(fontSize: 18),
                                )),
                            subtitle: Center(
                                child: Text(
                                  formatCurrency.format(
                                      int.parse(newlist[index].productPrice)),
                                  style: TextStyle(color: Colors.red, fontSize: 15),
                                )),
                          ),
                        ],
                      )),
                ),
              );
            }));
  }
}

结果看起来像这样

[ result[1]

如您所见，该卡在扩展时非常困难。我知道这是因为扩展小部件。是否可以制作卡wrap_content？

Answer 1

对于水平列表视图，如果它不是垂直滚动视图，则需要固定高度，您可以使用具有不同柔韧性的Expanded窗口小部件来使其工作。

使用扩展的小部件来工作构建小部件。

Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          centerTitle: false,
          title: const Text('November'),
        ),
        body: new Container(
            child: Column(
              children: <Widget>[
                new Expanded(flex: 1,child:  new Container(color: Colors.grey[300],),),
                Expanded(flex: 2,
                  child: ListView.builder(
                      itemCount: 10,
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (BuildContext context, int index) {
                        return GestureDetector(
                          onTap: () {
                            print("Product detail");
                          },
                          child: Card(
                            child: Container(
                                width: MediaQuery.of(context).size.width * 0.50,
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: <Widget>[
                                    Image.network(
                                        'https://homepages.cae.wisc.edu/~ece533/images/watch.png',
                                        width: 90,
                                        height: 90,
                                        filterQuality: FilterQuality.low),
                                    ListTile(
                                      title: Center(
                                          child: Text(
                                        'item Name ${index}',
                                        style: TextStyle(fontSize: 18),
                                      )),
                                      subtitle: Center(
                                          child: Text(
                                        '\$10',
                                        style: TextStyle(
                                            color: Colors.red, fontSize: 15),
                                      )),
                                    ),
                                  ],
                                )),
                          ),
                        );
                      }),
                ),
                new Expanded(flex: 3,child:  new Container(color: Colors.amber[100],),),
              ],
            )));
  }

结果屏幕

让我知道它是否符合您的要求。

处理listview项目的高度？

1 个答案: