flutter 想要垂直列表项和水平内部列表项

wr98u20j 于 2023-04-13 发布在 Flutter

关注(0)|答案(2)|浏览(145)

我希望每个abcdLine的项目characters在新的一行（垂直滚动），和所有项目的characters应该是水平滚动在Flutter应用程序.我尝试与Listview.builder()，但我不能得到我想要的.

List abcdLine = [
{
'characters': ['Ka','Ka','Ki','Kee','Ku','Koo','Ke','Kai','Ko','Kau','Kam','Kah'],
},
{
'characters': ['Kha','Kha','Khi','Khee','Khu','Khoo','Khe','Khai','Kho','Khau','Kham','Khah'],
},
{
'characters': ['Ga','Ga','Gi','Gee','Gu','Goo','Ge','Gai','Go','Gau','Gam','Gah'],
},
],

有什么更好的办法呢？希望，我能明白。
我也试过使用GridView和ListView，但是没有用。

flutter

来源：https://stackoverflow.com/questions/75970385/want-list-items-vertical-and-inner-list-items-horizontal-flutter

2条答案

按热度按时间

plicqrtu1#

您可以将ListView用于Parent，将characters用于SingleChildScrolView(child:Row(....))，或者将ListView与fixedHeight一起使用，两种情况都是scrollDirection: Axis.horizontal,

return Scaffold(
  body: ListView(
    children: [
      ...abcdLine.map((e) {
        return SingleChildScrollView(
          // you can ListView with horizontal direction with Fixed height
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              ...e['characters']?.map((e) {
                    return Container(
                      width: 100,
                      height: 100,
                      color: Colors.primaries[
                          (e.length * 1000) % Colors.primaries.length],
                      alignment: Alignment.center,
                      child: Text(e),
                    );
                  }).toList() ??
                  [],
            ],
          ),
        );
      }).toList(),
    ],
  ),
);

赞(0）回复(0）举报 2023-04-13

piok6c0g2#

也许你在找一份
checkout 条子列表和条子网格
Sliver list

赞(0）回复(0）举报 2023-04-13