自定义滚动Google Flutter中的水平列表视图

4
我正在尝试创建以下示意图所示的屏幕。我正在使用自定义滚动视图,但在自定义滚动视图中,我无法获取横向列表视图。我尝试在自定义滚动视图中使用列表视图,但完整视图未显示。但如果我将其垂直排列,则可以看到视图,就像下面的两个图像一样。使用自定义滚动视图 输入图像说明 请看Home类。
class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    HomeState homeState() => new HomeState();
    return homeState();
  }
}

class HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Home Screen'),
          backgroundColor: primarycolor,
        ),
        drawer: Drawer(
          child: new ListView(
            children: <Widget>[
              new UserAccountsDrawerHeader(
                accountName: new Text('Biz Standards'),
                accountEmail: new Text('bizstandards@gmail.com'),
                currentAccountPicture: new Container(
                    width: 100.0,
                    height: 100.0,
                    decoration: new BoxDecoration(
                        shape: BoxShape.circle,
                        image: new DecorationImage(
                            fit: BoxFit.fill,
                            image: new NetworkImage(
                                'https://cnet2.cbsistatic.com/img/3JQUEv_h8xcJ8QEcVNteWVADsew=/936x527/2017/08/21/ae78abff-be85-45e7-bae1-242ca5609f2c/androidoreolockup.jpg')))),
                decoration: new BoxDecoration(color: primarycolor),
              ),
              new ListTile(
                title: new Text('Profile'),
                trailing: new Icon(Icons.account_circle),
              ),
              new ListTile(
                title: new Text('Your Posts'),
                trailing: new Icon(Icons.bookmark_border),
              ),
              new ListTile(
                title: new Text('Change Password'),
                trailing: new Icon(Icons.track_changes),
              ),
              new ListTile(
                title: new Text('Contact Us'),
                trailing: new Icon(Icons.contact_mail),
              ),
              new ListTile(
                title: new Text('Help'),
                trailing: new Icon(Icons.help_outline),
              ),
              new ListTile(
                trailing: new Icon(Icons.subdirectory_arrow_left),
                title: new Text('Logout'),
              )
            ],
          ),
        ),
        floatingActionButton: new FloatingActionButton(
           onPressed: null,
           backgroundColor: primarycolor,
           child: Icon(Icons.add),
        ),
        body: new CustomScrollView(
          slivers: <Widget>[
            new SliverList(
              delegate: new SliverChildListDelegate(<Widget>[
                new BannerView(
                  data: [
                    'B',
                    'I',
                    'Z',
                    'S',
                    'T',
                    'A',
                    'N',
                    'D',
                    'A',
                    'R',
                    'D',
                    'S'
                  ],
                  buildShowView: (index, data) {
                    return Container(
                      color: secondarycolor,
                      child: new Center(
                        child: new Text(
                          data,
                          style: new TextStyle(
                              color: Colors.white, fontSize: 30.0),
                        ),
                      ),
                    );
                  },
                  onBannerClickListener: (index, data) {
                    print(index);
                  },
                ),
              ]),
            ),
            new SliverList(
              delegate: new SliverChildListDelegate(<Widget>[
                new Column(
                  children: <Widget>[
                    new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Container(
                          child: new Text(
                            'Top Stories',
                            style: new TextStyle(fontSize: 16.0),
                          ),
                          margin: EdgeInsets.all(10.0),
                        ),
                        Container(
                          child: new Text(
                            'See All',
                            style: new TextStyle(fontSize: 16.0),
                          ),
                          margin: EdgeInsets.all(10.0),
                        )
                      ],
                    ),
                    new Container(
                      margin:
                          EdgeInsets.only(right: 5.0, left: 5.0, bottom: 10.0),
                      child: new Divider(
                        color: secondarycolor,
                        height: 4.0,
                      ),
                    )
                  ],
                )
              ]),
            ),
            new SliverList(
              delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return GestureDetector(
                    onTap: () {
                      Navigator.push(
                          context,
                          new MaterialPageRoute(
                              builder: (context) => new StoryDetails()));
                    },
                    child: HomeAdapter(index),
                  );
                },
                childCount: 20,
              ),
            ),
            new SliverList(
              delegate: new SliverChildListDelegate(<Widget>[
                new Column(
                  children: <Widget>[
                    new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Container(
                          child: new Text(
                            'Latest Stories',
                            style: new TextStyle(fontSize: 16.0),
                          ),
                          margin: EdgeInsets.all(10.0),
                        ),
                        Container(
                          child: new Text(
                            'See All',
                            style: new TextStyle(fontSize: 16.0),
                          ),
                          margin: EdgeInsets.all(10.0),
                        )
                      ],
                    ),
                    new Container(
                      margin:
                          EdgeInsets.only(right: 5.0, left: 5.0, bottom: 10.0),
                      child: new Divider(
                        color: secondarycolor,
                        height: 4.0,
                      ),
                    )
                  ],
                )
              ]),
            ),
            new SliverList(
              delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return HomeAdapter(index);
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }

请找到适配器视图。
class HomeAdapter extends StatelessWidget {
  final int id;
  HomeAdapter(this.id);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Card(
      elevation: 4.0,
      margin: EdgeInsets.all(10.0),
      child: new Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(left: 5.0,top: 10.0),
            child: new Text(
              'Catergory $id',
              style: TextStyle(fontSize: 18.0),
            ),
            alignment: Alignment(-1.0, 0.0),
          ),
          new Image.asset(
            'assets/images/logo.png',
            width: double.infinity,
            height: 200.0,
          ),
          Container(
            margin: EdgeInsets.only(left: 5.0),
            child: new Text(
              'Story Title $id',
              style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
            ),
            alignment: Alignment(-1.0, 0.0),
          ),
          Container(
            margin:
                EdgeInsets.only(left: 5.0, right: 5.0, top: 5.0, bottom: 10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text('Posted By $id'),
                Text('Posted Date $id'),
              ],
            ),
          )
        ],
      ),
    );
  }
}

你尝试在ListView上使用scrollDirection了吗? - Yamin
是的,我已经尝试过了。 - ayub baba
1
你想要类似这样的东西吗:https://pasteboard.co/HzHD1pm.png?如果是的话,请告诉我把代码放在这里。 - Yamin
是的,那就是我想要的,请把代码放在这里。 - ayub baba
还有,我也需要标题和分隔符。@Yamin,请你把代码粘贴在这里。 - ayub baba
1个回答

2

与使用自定义滚动视图不同,您可以使用具有不同滚动方向的ListView。这是其中一部分的示例。您可以得到这个想法:

return new MaterialApp(
  home: new Scaffold(
    appBar: new AppBar(
      title: new Text('Home Screen'),
      backgroundColor: primarycolor,
    ),
    drawer: Drawer(
      child: new ListView(
        children: <Widget>[
          new UserAccountsDrawerHeader(
            accountName: new Text('Biz Standards'),
            accountEmail: new Text('bizstandards@gmail.com'),
            currentAccountPicture: new Container(
                width: 100.0,
                height: 100.0,
                decoration: new BoxDecoration(
                    shape: BoxShape.circle,
                    image: new DecorationImage(
                        fit: BoxFit.fill,
                        image: new NetworkImage(
                            'https://cnet2.cbsistatic.com/img/3JQUEv_h8xcJ8QEcVNteWVADsew=/936x527/2017/08/21/ae78abff-be85-45e7-bae1-242ca5609f2c/androidoreolockup.jpg')))),
            decoration: new BoxDecoration(color: primarycolor),
          ),
          new ListTile(
            title: new Text('Profile'),
            trailing: new Icon(Icons.account_circle),
          ),
          new ListTile(
            title: new Text('Your Posts'),
            trailing: new Icon(Icons.bookmark_border),
          ),
          new ListTile(
            title: new Text('Change Password'),
            trailing: new Icon(Icons.track_changes),
          ),
          new ListTile(
            title: new Text('Contact Us'),
            trailing: new Icon(Icons.contact_mail),
          ),
          new ListTile(
            title: new Text('Help'),
            trailing: new Icon(Icons.help_outline),
          ),
          new ListTile(
            trailing: new Icon(Icons.subdirectory_arrow_left),
            title: new Text('Logout'),
          )
        ],
      ),
    ),
    floatingActionButton: new FloatingActionButton(
      onPressed: null,
      backgroundColor: primarycolor,
      child: Icon(Icons.add),
    ),
    body: new ListView(
      children: <Widget>[
        new ListView(
          shrinkWrap: true,
          children: <Widget>[
            new Column(
              children: <Widget>[
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Container(
                      child: new Text(
                        'Latest Stories',
                        style: new TextStyle(fontSize: 16.0),
                      ),
                      margin: EdgeInsets.all(10.0),
                    ),
                    Container(
                      child: new Text(
                        'See All',
                        style: new TextStyle(fontSize: 16.0),
                      ),
                      margin: EdgeInsets.all(10.0),
                    )
                  ],
                ),
                new Container(
                  margin:
                      EdgeInsets.only(right: 5.0, left: 5.0, bottom: 10.0),
                  child: new Divider(
                    color: secondarycolor,
                    height: 4.0,
                  ),
                )
              ],
            )
          ],
        ),
        SizedBox(
          // a List view with horizontal direction cannot have unbounded height.
          height: 300.0,
          child: new ListView(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            children: List.generate<Widget>(
                20, (int index) => HomeAdapter(index)),
          ),
        ),
      ],
    ),
  ),
);

另外,查看这个示例


给定静态高度可能会影响不同屏幕的显示效果,对吗? - ayub baba
它会有影响,但不是错误的方式。更大的屏幕将拥有更多的数据(小部件)。如果您想要为更大的屏幕扩展高度,请使用AspectRatio小部件或类似的其他小部件(请参阅https://dev59.com/1VUL5IYBdhLWcg3wQWOD#50596132)。此外,您可以从屏幕高度计算所需的高度。(请参阅https://dev59.com/NlgQ5IYBdhLWcg3wOBSw) - Yamin
滚动方向:Axis.horizontal 完整视图已消失。 - ayub baba
将整个代码发送到我的电子邮件地址,我会检查。yamin[at]aut.ac.ir - Yamin
好的,兄弟,我会发送它。 - ayub baba
显示剩余6条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接