1. ホーム
  2. dart

[解決済み] flutterでページをスクロールする方法

2023-04-02 03:58:53

質問

私のページのコードは以下のようなものです。

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(... ),
      body: new Stack(
        children: <Widget>[
          new Container(
            decoration: BoxDecoration(
                image: DecorationImage(...),
          new Column(children: [
            new Container(...),
            new Container(...... ),
            new Padding(
              child: SizedBox(
                child: RaisedButton(..),
            ),
            new Divider(),
            new Column(
              children: <Widget>[
                new Container(
                  child: new Row(
                    children: <Widget>[
                      new Expanded(
                        child: new Text(  ),
                      ),
                      new IconButton(
                        icon: IconButton(..),
                        onPressed: () {
                          _changed(true, "type");
                        },
                      ),
                    ],
                  ),
                ),
                visibilityPropertyType
                    ? new Container(
                        margin: EdgeInsets.all(24.0),
                        child: new Column(
                          children: <Widget>[
                            new Row(
                              children: <Widget>[
                                new Expanded(... ),
                                new RaisedButton(..)
                              ],
                            ),
                            new Padding(
                              padding: const EdgeInsets.only(top: 10.0),
                              child: new Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                children: <Widget>[
                                  new Column(
                                    children: <Widget>[
                                      new Row(  
                                        children: <Widget>[.. ]),
                                      new Row(
                                        children: <Widget>[]),
                                      new Row(
                                        children: <Widget>[]),
                                      new Row(
                                        children: <Widget>[],
                                  ),
                                  new Column(
                                    children: <Widget>[
                                      new Row(
                                        children: <Widget>[],
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ))
                    : new Container(),
              ],
            ),
            new Divider(
              color: Colors.white,
            )
          ])
        ],
      ),
    );
  }

ボディ部分をスクロールできるようにしたい。そのスクロールをどのように実装すればよいのでしょうか。 もし、カスタムスクロールメソッドが存在するならば、私は試してみました。 ScrollableSingleChildScrollView を使うことができますが、私のニーズを満たすことはできません。 私が SinglechildScrollView を使うと、BoxConstraintsが無限の高さを強制するというエラーが発生します。LayoutBuilderを削除すると、A RenderFlex overflowed by 22 pixels on the bottom エラー

どのように解決するのですか?

ウィジェットツリーをSingleChildScrollViewで囲みます。

 body: SingleChildScrollView(
child: Stack(
    children: <Widget>[
      new Container(
        decoration: BoxDecoration(
            image: DecorationImage(...),
      new Column(children: [
        new Container(...),
        new Container(...... ),
        new Padding(
          child: SizedBox(
            child: RaisedButton(..),
        ),
....
...
 ); // Single child scroll view

SingleChildScrollViewは1つの直接のウィジェットしか持てないことに注意してください(AndroidのScrollViewと同じです)。