flutter 如何将列表视图显示为水平单选列表标题?

g6ll5ycj  于 2023-02-25  发布在  Flutter
关注(0)|答案(3)|浏览(145)

我有一个从数据库中检索到的列表,我想将其显示为水平单选按钮列表。我尝试用一行将其 Package ,但出现错误。
这是我垂直检索它们的代码。

ListView.builder(
                shrinkWrap: true,
                itemCount: controller.doc.length,
                itemBuilder: (context, index) {
                  return RadioListTile(
                    title: Text(controller.doc[index]['id'],
                        style: TextStyle(color: textColor)),
                    groupValue: tag,
                    value: controller.doc[index]['id'],
                    activeColor: primary,
                    onChanged: (value) {
                      setState(() {
                        tag = value;
                      });
                    },
                  );
                },
              ),
llmtgqce

llmtgqce1#

RadioListTileRadio小工具和ListTile之间的组合。ListTile将扩展到最大宽度。这将导致错误,如果您使您的ListTile水平滚动。
这是因为小部件未能hasSize。如果必须使用ListTile,那么这是解决方案之一

ListView.builder(
  shrinkWrap: true,
  scrollDirection: Axis.horizontal,
  itemCount: 4,
  itemBuilder: (context, index) {
    return SizedBox(
      width: MediaQuery.of(context).size.width, //  <= give specific width
      child: RadioListTile(
        title: const Text("lorem Ipsum",
            style: TextStyle(color: Colors.blueGrey)),
        groupValue: false,
        value: false,
        activeColor: Colors.green,
        onChanged: (value) {},
      ),
    );
  },
),

另一个解决方案是,使您的自定义放射性,例如:

Row(
 children:[
   Radio()
   Expanded(child: Text()),
])
qhhrdooz

qhhrdooz2#

ListView.builder(
  shrinkWrap: true,
  scrollDirection: Axis.horizontal,
  itemCount: controller.doc.length,
  itemBuilder: (context, index) {
    return RadioListTile(
      title: Text(controller.doc[index]['id'],
          style: TextStyle(color: textColor)),
      groupValue: tag,
      value: controller.doc[index]['id'],
      activeColor: primary,
      onChanged: (value) {
        setState(() {
          tag = value;
        });
      },
    );
  },
);

您必须使用此scrollDirection: Axis.horizontal,

unhi4e5o

unhi4e5o3#

当水平使用RadioListTile时,上面给出的代码是正确的,只需给它一个固定的或计算的宽度

ListView.builder(
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      itemCount: 4,
      itemBuilder: (context, index) {
        return SizedBox(
          width: 350 //  <= give specific width
          child: RadioListTile(
            title: const Text("lorem Ipsum",
                style: TextStyle(color: Colors.blueGrey)),
            groupValue: false,
            value: false,
            activeColor: Colors.green,
            onChanged: (value) {},
          ),
        );
      },
    ),

相关问题