如何在单个屏幕上加载两个列表视图?

时间:2020-04-12 13:07:49

标签: flutter flutter-layout

我使用 flutter 开发了一个android应用程序。该应用程序具有发布屏幕。在此屏幕中,用户可以看到帖子。当用户触摸某个帖子时,他可以看到完整的帖子。但是我想在帖子查看屏幕上添加评论视图部分。用户必须能够在相关文章上添加评论并查看其他人的评论。帖子是通过node.js API检索的。

我当前的帖子全视角屏幕代码是:

   class FullPostView extends StatefulWidget {
  List list;
  int index;
  FullPostView({this.index, this.list});

  @override
  _FullPostViewState createState() => _FullPostViewState();
}

class _FullPostViewState extends State<FullPostView> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: new AppBar(
         iconTheme: IconThemeData(
            color: Colors.black, // back button color
          ),
         elevation: 0,
        backgroundColor: Colors.white,
        title: new Center(child:  new Text("${widget.list[widget.index]['title']}", style: TextStyle(color: Colors.black,fontFamily: 'Montserrat', fontWeight: FontWeight.bold ),)),
      ),
      body: new Container(
         height: MediaQuery.of(context).size.height * 0.8, 
        child: new SingleChildScrollView(

        padding: const EdgeInsets.all(20.0),
        child: new Card(
          child: new Center(
            child: new Column(
              children: <Widget>[
                new Padding(padding: const EdgeInsets.only(top: 30.0, left: 2),),
               new Image.asset('assets/images/ex.jpg',height: 210,),
               Container(
                  margin: new EdgeInsetsDirectional.only(start: 1.0, end: 210.0, top: 10),
                  child: new Text(" Post By: ${widget.list[widget.index]['authortype']}", style: new TextStyle(fontFamily: 'Montserrat',fontSize: 11.0, color: Colors.redAccent[200]),),
                ),
                new Text(" \n\n ${widget.list[widget.index]['subject']}", style: new TextStyle(fontFamily: 'Montserrat',fontWeight: FontWeight.bold, fontSize: 18.0),),
                new Padding(padding: const EdgeInsets.only(top: 13.0),),
                Container(
                  margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0, top: 10),
                  child: new Text(" ${widget.list[widget.index]['discription']}", style: new TextStyle(fontFamily: 'Montserrat',fontSize: 13.0, color: Colors.brown),),
                ),
                SizedBox(
                  height:10,
                )
              ],
            ),
          ),
        ),
      ),
      ),
    );
  }
}

我该怎么做?

1 个答案:

答案 0 :(得分:0)

我给您一个一般的想法,您可以在Expanded内使用Column并将列表放入其中。对于固定大小,可以使用SizedBox代替Expanded

return Column(
  children: [
    Expanded(
      flex: 2,
      child: FirstList(),
    ),
    Expanded(
      flex: 3,
      child: SecondList(),
    )
  ],
);