flutter - 如何更改 PageView 小部件中 FloatingActionButton 的颜色？

Question

我在PageView我的应用程序正文中使用了一个小部件。每个PageView孩子都有特定的SliverAppBar颜色，我希望 的颜色与FloatingActionButton相同SliverAppBar，但我不知道如何创建它。因为页面之间的唯一区别是内容和颜色，所以我在不同的文件中创建了一个自定义 Widget。

以下是我的代码的简化版本：

import 'package:flutter/material.dart';

void main() {
  Color color;

  Scaffold(
    body: PageView(
      children: [
        CustomScrollView(
          slivers: [
            SliverAppBar(
              backgroundColor: Colors.blue,
            )
          ],
        ),
        CustomScrollView(
          slivers: [
            SliverAppBar(
              backgroundColor: Colors.green,
            )
          ],
        ),
      ],
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      backgroundColor: color,
    ),
  );
}

标签： flutterflutter-layout

Answer 1

下面的代码将完成你的工作：享受......！

import 'package:flutter/material.dart';

void main() {
Color color;

Scaffold(
body: PageView(
  onPageChanged: (val){
  if(val == 0)
  {
    color = Colors.blue;
    setState(() {});
   }
   else if(val == 1){
   color = Colors.green;
   setState(() {});       
    }
    }
  children: [
    CustomScrollView(
      slivers: [
        SliverAppBar(
          backgroundColor: Colors.blue,
        )
      ],
    ),
    CustomScrollView(
      slivers: [
        SliverAppBar(
          backgroundColor: Colors.green,
        )
      ],
    ),
  ],
),
floatingActionButton: FloatingActionButton(
  onPressed: () {},
  backgroundColor: color,
),
);
 }