简体   繁体   English

Flutter - 如何制作嵌套列表视图?

[英]Flutter - how to make nested list views?

I want to make a nested list view in the following manner我想以下列方式制作嵌套列表视图

在此处输入图片说明

How can I do this?我怎样才能做到这一点? I only want the nested list view for one of the radio tiles not all of them.我只想要其中一个无线电图块的嵌套列表视图,而不是全部。

I tried including both ListView builder in another List however there was rendering problem.我尝试在另一个列表中包含两个 ListView 构建器,但是存在渲染问题。

My code:我的代码:

Column(

      children: <Widget>[
        .....

        Expanded(
          child:

          ListView.builder(
            padding: EdgeInsets.all(0.0),
            itemCount: tasks.length,
            itemBuilder: (context, index) {

              return RadioListTile<String>(

               //contentPadding: EdgeInsets.symmetric(horizontal: 16.0),
                title:  Text(tasks[index], style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w400)),
                value: tasks[index],
                groupValue: selectedRadio,
                onChanged: (val){
                    setSelectedRadio(val);
                }
              );
            },
          ),
        ),

      ],
    );

You cannot build a ListView inside a ListView as you will confuse the scroll behaviour.您不能在ListView构建ListView因为您会混淆滚动行为。 You should use List widget that does not scroll, such as Column .您应该使用不滚动的 List 小部件,例如Column

ListView.builder(
  padding: EdgeInsets.all(0.0),
  itemCount: tasks.length,
  itemBuilder: (context, index) {
    if (// single RadioListTile) {
      return RadioListTile<String>(
        title:  Text(tasks[index], style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w400)),
        value: tasks[index],
        groupValue: selectedRadio,
        onChanged: (val) => setSelectedRadio(val),
      );
    }
    else if (// nested RadioListTile) {
      return Column(
        children: <Widget>[
          // RadioListTile1,
          // RadioListTile2,
          // RadioListTile3,
        ],
      );
    }
  },
),

You can totally include a list view inside of another list view.您可以在另一个列表视图中完全包含一个列表视图。 But the inside list view has to have shrinkWrap set to true但是内部列表视图必须将shrinkWrap 设置为true

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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