28

背景ウィジェットを使用して、Flutter でSliverAppBarを使用しています。

問題は、展開されている場合、正しく表示されるようにタイトルとアイコン (誘導とアクション) が白く、折りたたまれている場合は黒に変更する必要があることです。

どうすればブール値を取得できるかについてのアイデアはありますか? または、この問題を解決する他の方法。

ありがとうございました。

class SliverExample extends StatefulWidget {
  final Widget backgroundWidget;
  final Widget bodyWidgets;

  SliverExample({
    this.backgroundWidget,
    this.body,
  });
  @override
  _SliverExampleState createState() => _SliverExampleState();
}

class _SliverExampleState extends State<SliverExample> {

  // I need something like this
  // To determine if SliverAppBar is expanded or not.
  bool isAppBarExpanded = false;

  @override
  Widget build(BuildContext context) {

    // To change the item's color accordingly
    // To be used in multiple places in code
    Color itemColor = isAppBarExpanded ? Colors.white : Colors.black;

    // In my case PrimaryColor is white,
    // and the background widget is dark

    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            leading: BackButton(
              color: itemColor, // Here
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.shopping_cart,
                  color: itemColor, // Here
                ),
                onPressed: () {},
              ),
            ],
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                'title',
                style: TextStyle(
                  fontSize: 18.0,
                  color: itemColor, // Here
                ),
              ),
              // Not affecting the question.              
              background: widget.backgroundWidget,
            ),
          ),
          // Not affecting the question.
          SliverToBoxAdapter(child: widget.body),
        ],
      ),
    );
  }
}
4

4 に答える 4

2

以下のような問題の適切な解決策となる innerBoxIsScrolled ブール値フラグを持つ NestedScrollView を使用します

NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          print("INNEER SCROLLED VI=======>$innerBoxIsScrolled");
          return <Widget>[
            SliverAppBar(), 
            ]},
body:Center(child:Text("Test IT")),

);
于 2021-09-25T12:53:26.603 に答える