将列表视图放入列中

时间:2019-04-02 15:46:10

标签: dart flutter flutter-layout

我想将一个listview(1000多个项目)放入一列中,我尝试了Expanded,但是没有用。 在该列中,有一个滑动器和一个列表视图。

有什么解决办法吗? 这是我的代码:

Widget build(BuildContext context) {
    return DefaultTabController(
      length: _list.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text("ListView in Column"),
          centerTitle: true,
          bottom: TabBar(
            isScrollable: false,
            tabs: _list.map((String ss) {
              return Tab(text: ss);
            }).toList(),
          ),
        ),
        body: Column(
          children: <Widget>[
            Container(
              height: 200,
              width: MediaQuery.of(context).size.width,
              child: Swiper(
                itemBuilder: (BuildContext context, int index) {
                  return _swiperImage[index];
                },
                itemCount: _swiperImage.length,
                autoplay: true,
                loop: true,
                pagination: SwiperPagination(),
                control: SwiperControl(),
                onTap: (index) =>
                    Fluttertoast.showToast(msg: 'Clicked ${index + 1}'),
              ),
            ),
            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                itemBuilder: (BuildContext context, int index) {
                  return ListItemExamStrategyWidget(_listExamStrategy[index]);
                },
                itemCount: _listExamStrategy.length,
              ),
            )
          ],
        ),
      ),
    );
  }

enter image description here

2 个答案:

答案 0 :(得分:1)

一些更改:

  • Column包裹在SingleChildScrollView内。

    body: SingleChildScrollView(
      child: Column(
    
  • 从您的Expanded删除ListView小部件父级

  • ListView的物理性质设置为NeverScrollableScrollPhysics

    ListView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
    

答案 1 :(得分:1)

它可在带有滑动器和扩展小部件的列中使用,该小部件可容纳1000个文本的列表视图

这是我的工作代码

    final List<String> _list = <String>['tab-1', 'tab-2'];
  final List<String> _swiperImage = <String>[
    'http://via.placeholder.com/350x150',
    'http://via.placeholder.com/350x150'
  ];

  @override
  Widget build(BuildContext context) {
      return DefaultTabController(
        length: _list.length,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('ListView in Column'),
            centerTitle: true,
            bottom: TabBar(
              isScrollable: false,
              tabs: _list.map((String ss) {
                return Tab(text: ss);
              }).toList(),
            ),
          ),
          body: Column(
            children: <Widget>[
              Container(
                height: 200,
                width: MediaQuery.of(context).size.width,
                child: Swiper(
                    itemBuilder: (BuildContext context, int index) {
                      return new Image.network(
                        _swiperImage[index],
                        fit: BoxFit.fill,
                      );
                    },
                    itemCount: _swiperImage.length,
                    autoplay: true,
                    loop: true,
                    pagination: const SwiperPagination(),
                    control: const SwiperControl(),
                    onTap: (int index) {
                      print('----------$index');
                    }),
              ),
              new Expanded(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemBuilder: (BuildContext context, int index) {
                    return new Container(
                      padding: const EdgeInsets.all(15.0),
                      child: new Text('index ${index.toString()}'),
                    );
                  },
                  itemCount: 100,
                ),
              )
            ],
          ),
        ),
      );
  }

Sample screen