Flutterはmaterial連動スクロールNestedScrollViewのような

2131 ワード

効果図1.外層ラップ-nestedScrollView(
--children:ListView()/いくつかのitemを作成
//このheaderSliverBuilderは必須このWidget[]現在のテストはSliverAppBarかAppbarしかできないようです
--headerSliverBuilder:(BuildContext context,bool innerBox Issrolled){//SliverAppBar``を作成する
SliverAppBar(
                expandedHeight: 214,
                flexibleSpace: FlexibleSpaceBar(
                  background: Container(
                    width: double.infinity,
                    height: 214,
                    child: Image(
                      image: NetworkImage('http://img.ring.51app.cn/small/51/1430938641998.jpg'),
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                ),
              ),

```

} )
完全なコード:
 NestedScrollView(
              body: new Column(
                children: [
                  Flexible(
                    flex: 1,
                    fit: FlexFit.tight,
                    child: ListView(
                      children: _getItem(),
                    ),
                  )
                ],
              ),
              headerSliverBuilder:
                  (BuildContext context, bool innerBoxIsScrolled) {
                return [
                  SliverAppBar(
                    expandedHeight: 214,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Container(
                        width: double.infinity,
                        height: 214,
                        child: Image(
                          image: NetworkImage('http://img.ring.51app.cn/small/51/1430938641998.jpg'),
                          fit: BoxFit.fitWidth,
                        ),
                      ),
                    ),
                  ),
                ];
              },
              controller: ScrollController(),
            )

公式チュートリアルでよくわかりました:api.flutter.dev/flutter/wid…