Question

您好，我正在制作一个Flutter应用程序，其中在ScrollView中需要放置Expandable列表视图。首先是我的build方法。

  return Scaffold(   
    appBar: AppBar(  
      backgroundColor: app_color,
      iconTheme: IconThemeData(  
        color: Colors.white, //change your color here 
      )),   
    //debugShowCheckedModeBanner: false,
    //key: scaffoldKey,    
    backgroundColor: app_color,
  body: SingleChildScrollView(  
    child: Container(  
      child: Column(  
        mainAxisAlignment: MainAxisAlignment.spaceBetween,  
        children:<Widget>[  
          Text("Header"),  
          new ListView.builder(  
            itemCount: datas.length,  
            shrinkWrap: true,  
            itemBuilder: (context, i) {  
              return new ExpansionTile(  
                title: new Text(datas[i].title, style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold,                                 fontStyle: FontStyle.italic),),  
                children: <Widget>[  
                  new Column(  
                    children: _buildExpandableContent(datas[i]),  
                  ),  
                ],  
              );  
            },  
          ),  
          Text("Footer"),  
        ],  
      ),  
    )  
  )

);  
  }

现在的问题是，没有SingleScrollChidView的情况就可以正常工作，但是在使用SingleScrollChidView之后，它什么也不会显示，并且会出现错误RenderBox was not laid out。这是怎么回事？如何在Flutter的Singlechildscroll视图内使用可扩展列表视图。

Answer 1

使用ListView或类似方法将SizedBox设置为固定高度

SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Text("Header"),// tested with 20 of these for scrolling
            SizedBox(
              height: MediaQuery.of(context).size.height / 2,
              child: new ListView.builder(
                itemCount: 20,
                shrinkWrap: true,
                itemBuilder: (context, i) {
                  return new ExpansionTile(/* whatever */ );
                },
              ),
            ),
            Text("Footer"),// tested with 20 of these for scrolling
          ],
        ),
      )

Answer 2

修改后的答案

尝试一下，您将获得所需的输出。

您可以找到输出here.

Column(
  children: <Widget>[
     Text(),
     Expanded(
        child: ListView.Builder()
     ),
     Text()
   ]
 )

考虑到布局也会发生变化，在函数_buildExpandableContent()下返回的内容仍然未知。

Answer 3

使用SizedBox.expand解决此问题，

char **contents = storeContents(...);

Answer 4

我能够在ScrollView中用以下文字实现Expanded ListView： -在Wrap内使用SingleChildScrollView，前提是您使用ListView

制作所有shrinkWrap: true

SingleChildScrollView(
      child: Wrap(
        direction: Axis.horizontal,
        children: <Widget>[
          _textBody, // text body, with 1000+ words
          Padding(
            padding: const EdgeInsets.all(15.0),
            child: Column(
              children: <Widget>[
                ListViewOne(_genericListDataOne()),
              ],
            ),
          ),
          Column(
            children: <Widget>[
              ListViewTwo(_genericListDataTwo())
            ],
          )
        ],
  ),
    ),

ListViewOne的代码的一部分

 ListViewOne(
  shrinkWrap: true,
  padding: new EdgeInsets.symmetric(vertical: 8.0),
  children: // build list here,
);

如何将可扩展列表视图放入滚动视图中？

4 个答案: