2 日前に flutter で sliver ウィジェットの使用法を学び、それを使ってスキルを伸ばしていました。私はある種の架空のプロジェクトを構築していましたが、そこで問題に直面しました。
考えてみましょう、xウィジェットの下の私の体のコンテナに15個のコンテナがあり、それらが垂直にスクロールできるようにします。 appbar または sliver appbar のように、他のものはその下にスクロールします。
ここでは、CustomScrollView ウィジェットの下でスライバーと SliverFixedExtentList を使用して目的を示しています。スライバーを使用しない他のオプションがある場合は、お気軽に私と共有してください。前もって感謝します :)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
actions: <Widget>[
Icon(
Icons.camera_front,
size: 40,
)
],
title: Text("Sliver Example"),
leading: Icon(Icons.menu),
backgroundColor: Colors.green,
expandedHeight: 100.0,
floating: true,
pinned: true),
SliverFixedExtentList(
itemExtent: 75,
delegate: SliverChildListDelegate([
Container(
color: Colors.blue,
child: Text("1"),
),
Container(
color: Colors.pink,
child: Text("2"),
),
Container(
color: Colors.yellow,
child: Text("3"),
),
Container(
color: Colors.red,
child: Text("4"),
),
Container(
color: Colors.black,
child: Text(
"Desired Appbar Conainer number 5, which will stuck\n there instead of the sliverappbar sliver example when it reached to the top ",
style: TextStyle(color: Colors.white),
),
),
Container(
color: Colors.amber,
child: Text("6"),
),
Container(
color: Colors.blue,
child: Text("7"),
),
Container(
color: Colors.yellow,
child: Text("8"),
),
Container(
color: Colors.blue,
child: Text("9"),
),
Container(
color: Colors.pink,
child: Text("10"),
),
Container(
color: Colors.blue,
child: Text("11"),
),
Container(
color: Colors.yellow,
child: Text("12"),
),
Container(
color: Colors.blue,
child: Text("13"),
),
Container(
color: Colors.purpleAccent,
child: Text("14"),
),
Container(
color: Colors.white,
child: Text("15"),
),
]),
),
],
),
),
);
}
}