web-dev-qa-db-ja.com

他のウィジェットとスクロール可能な列のListView.Builder（）をフラッター

さまざまなビューを持つTabBarView（）があります。上部にTextField、下部にListView.Builder（）を持つColumnにしたいのですが、両方のウィジェットが同じスクロール可能な領域（scrollview）にある必要があります。私がそれを実装した方法はいくつかのエラーを投げました：

@override
Widget build(BuildContext context) {
return new Column(
  mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      new Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: new TextField(
            decoration: new InputDecoration(
                hintText: "Type in here!"
            ),
          )
      ),
      new ListView.builder(
          itemCount: _posts.length, itemBuilder: _postBuilder)
    ],
   );
}

エラー：

I/flutter (23520): The following assertion was thrown during performResize():
I/flutter (23520): Vertical viewport was given unbounded height.
I/flutter (23520): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (23520): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (23520): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (23520): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (23520): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (23520): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (23520): the height of the viewport to the sum of the heights of its children.

ListView.builder（）をExpanded-Areaにスタックする方法を読みましたが、テキストフィールドが「スティッキー」になってしまいました。 :-)

私もCustomScrollViewに出会いましたが、それを実装する方法を完全に理解していませんでした。

前もって感謝します！

listviewscrollviewflutter
12
aksn

ListViewをExpandedウィジェット内に配置すると、問題が解決するはずです。

@override
Widget build(BuildContext context) {
return new Column(
  mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      new Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: new TextField(
            decoration: new InputDecoration(
                hintText: "Type in here!"
            ),
          )
      ),
      new Expanded(child: ListView.builder(
          itemCount: _posts.length, itemBuilder: _postBuilder))
    ],
   );
}
41
Siavash

Columnはスクロールできないため、上部のTextFieldはスクロールできませんが、下部のListViewはスクロールできません。

私の意見では、これを解決する最善の方法は、TextFieldをListViewの最初のアイテムにすることです。

したがって、列は必要ありません。親ウィジェットはListViewであり、その子はTextFieldの後に_postBuilderで構築した残りのアイテムが続きます。

0
Edman

最善の方法は、SingleChildScrollViewの列の子を作成し、SingleChildScrollViewとListView.builderの両方に同じScrollControllerを割り当てることにより、列をスクロール可能にすることです。これにより、テキストフィールドと下のListViewがスクロール可能になります。

0
Harsh Gupta