在flutter中使用listview.builder的水平不可滚动列表

时间:2018-10-29 06:08:30

标签: dart flutter

我要感谢flutter社区提供的如此大量的知识库和软件包。

我的问题是我想制作一个水平列表,该列表不会像listview.builder中的大多数示例一样工作。

我已经成功地使文本与listTile垂直对齐,但这不是我想要的。

TLDR;如何使用itemBuilder使每个句子的结构像书一样?


我在寻找什么

title1
anotherTitle1

longtext 1 | longtext 2 |包含以下内容的长
文本 很长的
清单3 |另一个 很长的文字
,其中包含 文字4 | ...

title2
anotherTitle2

longtext 1 | longtext 2 |包含以下内容的长
文本 很长的
清单3 |另一个 很长的文字
,其中包含 文字4 | ...


我当前的代码

Container(
      child: Directionality(
        textDirection: TextDirection.rtl,
        child: new CustomScrollView(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          slivers: <Widget>[
            new SliverPadding(
              padding: const EdgeInsets.symmetric(vertical: 10.0),
              sliver: new SliverList(
                delegate: new SliverChildBuilderDelegate(
                  (context, index) {
                    return Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Center(
                        child: Container(
                            decoration: new BoxDecoration(
                              color: new Color.fromRGBO(58, 66, 86, 1.0),
                              shape: BoxShape.rectangle,
                              borderRadius: new BorderRadius.circular(8.0),
                              boxShadow: <BoxShadow>[
                                new BoxShadow(
                                  color: Colors.black12,
                                  blurRadius: 10.0,
                                  offset: new Offset(0.0, 10.0),
                                ),
                              ],
                            ),
                            child: Column(
                              children: <Widget>[
                                new Container(height: 4.0),
                                new Text(text[index].title),
                                new Container(height: 10.0),
                                new Text(text[index].anotherTitle),
                                new Separator(),                           
                                ListView.builder(
                                  itemCount: text.longlist[index].longtext.length
                                  itemBuilder:
                                      (BuildContext context, position) {
                                    return Container(
                                      decoration: BoxDecoration(
                                        border: new Border (
                                          top: BorderSide(color: Colors.white)
                                        )
                                      ),
                                        child: ListTile(
                                        title: Text(text.longlist[index].longtext[position].text,),
                                            trailing: Container(
                                                width: 30.0,
                                                height: 30.0,
                                                decoration: new BoxDecoration(
                                                  shape: BoxShape.circle,
                                                  border: Border.all(color: Colors.white, ),
                                                 // color: Colors.white,
                                            ),
                                            child: Center(child: Text(text.longlist[index].longtext[position].number)),
                                            ),
                                      ),
                                    );
                                  },
                                  shrinkWrap: true,
                                  physics: ClampingScrollPhysics(),
                                )
                              ],
                            )
                            ),
                      ),
                    );
                  },
                  childCount: text.longlist[index].length,
                ),
              ),
            ),
          ],
        ),
      ),
    );

更新:考虑之后,它更像是一个柔性行,并排放置(直到容器宽度),然后转到下一行。

0 个答案:

没有答案