Question

我正在尝试开发一个水平列表视图。每当我键入scrollDirection：Axis.horizontal并重新运行该程序时，我都会遇到问题。我试图用listview敲击整个列表，但也无法正常工作

body: Container(
child:ListView.builder(                  
      itemCount: _list.length,
       itemExtent: 200.0,
      itemBuilder: (context, i) {
        final b = _list[i];

        return new ListTile(
            title: new Card(
              elevation: 1.0,
              child: new Container(
                height: 293,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    boxShadow: [
                      BoxShadow(
                          blurRadius: 6,
                          color: Colors.black,
                          offset: Offset(4, 4))
                    ]),
                padding: EdgeInsets.all(1.0),
                child: 
                Column(
                  children: <Widget>[
                    SizedBox(height: 4),
                    Padding(
                      child: Image.network(b.bikeimage),
                      padding: EdgeInsets.only(bottom: 0.0),
                    ),
                    Padding(
                      child: Text(
                        b.name,
                        textAlign: TextAlign.right,
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 20,
                            color: Colors.black), ),
                      padding: EdgeInsets.only(left: 10),
                    ),
                  ],
                ),
              ),
            ),
            onTap: () {
            });
      },
    ),

）

Answer 1

您收到错误消息是因为没有为容器指定宽度和高度。

下面的代码可以正常工作，请检查一下

body: Container(
      // give your container any desired height
       height: 500,
       // give your container any desired width
       width: double.infinity,
       child: ListView.builder(    

       // set the scroll direction to horizontal for a horizontal list
       scrollDirection: Axis.horizontal,              
      ...
      // the rest of your listview.builder code here
      ...
       ),
     );

希望这会有所帮助。

Answer 2

您的容器似乎没有高度或宽度限制，因此无法绘制。

Answer 3

您尚未在代码中提及scrollaxisdirection，请添加该内容并尝试。进一步参考 https://pusher.com/tutorials/flutter-listviews

Answer 4

您可以使用以下类在水平或垂直模式下构建列表视图：

import 'package:flutter/material.dart';
class HorizontalListView extends StatefulWidget {

HorizontalListView({this.items, this.horizontal, this.width, this.height});

final List<Widget> items;
final bool horizontal;

final double width;
final double height;

@override
  _HorizontalListState createState() {
    // TODO: implement createState
    return _HorizontalListState();
  }
}

class _HorizontalListState extends State<HorizontalListView> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        margin: EdgeInsets.symmetric(vertical: 20.0),
        height: widget.height > 0 ? widget.height : 200.0,
        child: ListView(
          scrollDirection: widget.horizontal ? Axis.horizontal : Axis.vertical,
          children: widget.items,
        ));
  }

@override
  void initState() {
    super.initState();
  }
}

如何在flutter中创建水平列表

4 个答案: