简体   繁体   中英

How to make a SingleChildScrollView with nested ListView?

I have a list of days, and a list of opening hours for each day.

I need to make the list of days scrollable, and the list of opening hours expands as necessary (= I don't want the list of opening hours to be scrollable into a defined height container).

How to make the list scrollable?

Here is what I have so far, a list of days that is not scrollable (and I can't see sunday):

        SingleChildScrollView(
            child: ListView.builder(
                itemCount: _days.length,
                itemBuilder: (context, i) {
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                          padding: EdgeInsets.all(18.0),
                          child: Text(_days[i],
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  color: Colors.grey[700]))),
                      Container(
                        decoration: BoxDecoration(color: Colors.white),
                        child: ListView.builder(
                            shrinkWrap: true,
                            itemCount: _daysDispos[i].length,
                            itemBuilder: (context, j) {
                              final dispo = _daysDispos[i][j];
                              return ListTile(
                                  title: Text(dispo.address.line));
                            }),
                      )
                    ],
                  );
                })),

EDIT

In the first listView builder, add: physics: NeverScrollableScrollPhysics()

Solved my issue.

A good solution would be using Expandable package, and add multiple Expandables inside a single ListView.

Another Solution would be replacing the outer ScrollView with one single ListView, whose Childs will be 7 Columns, each column contains a group of opening hours.

You can try CustomScrollView with multiple SliverLists for your purposes instead of using SingleChildScrollView:

Widget build(BuildContext context) {
return CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildListDelegate([
        Column(
          children: <Widget>[
            //Widgets you want to use
          ],
        ),
      ]),
    ),
    SliverList(
      delegate: SliverChildListDelegate([
        Column(
          children: <Widget>[
          //Widgets you want to use
          ],
        ),
      ]),
    ),
  ],
);

}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM