Question

我正在尝试在脚手架上使用不同的背景颜色，但是当我使用导航器推送到不同的页面时，显然动画是使用固定的白色背景执行的。

如何设置？

以下示例代码和行为：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigator, how to set animation background?',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        scaffoldBackgroundColor: Colors.white70,
        canvasColor: Colors.white70,

        /* none of those work on the animation:

        backgroundColor: Colors.white70,
        splashColor: Colors.white70,
        dialogBackgroundColor: Colors.white70,
        accentColor: Colors.white70,
        cardColor: Colors.white70,
        bottomAppBarColor: Colors.white70,
        cursorColor: Colors.white70,
        disabledColor: Colors.white70,
        buttonColor: Colors.white70,
        dividerColor: Colors.white70,
        errorColor: Colors.white70,
        highlightColor: Colors.white70,
        hintColor: Colors.white70,
        indicatorColor: Colors.white70,
        secondaryHeaderColor: Colors.white70,
        selectedRowColor: Colors.white70,
        textSelectionColor: Colors.white70,
        textSelectionHandleColor: Colors.white70,
        toggleableActiveColor: Colors.white70,
        unselectedWidgetColor: Colors.white70,
        */
      ),
      home: Page(
        title: 'Home Page',
        childPageTitle: 'Child Page',
      ),
    );
  }
}

class Page extends StatefulWidget {
  Page({Key key, this.title, this.childPageTitle}) : super(key: key);
  final String title;
  final String childPageTitle;

  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page> {
  @override
  Widget build(BuildContext context) {
    Widget button;

    if (widget.childPageTitle != null) {
      button = FloatingActionButton(
        onPressed: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => Page(title: widget.childPageTitle))),
        child: Icon(Icons.navigate_next),
      );
    }

    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(child: Text(widget.title)),
      floatingActionButton: button,
    );
  }
}

Answer 1

显然，Navigator，或更具体地说CupertinoPageTransition并不是问题。它们可以工作，但是可以使用其他颜色。

以某种方式为基础色Colors.white70定义过渡背景色的计算使它变得非常白，但是在其他颜色中看起来还不错。

Answer 2

对于遇到此问题的其他人，我的问题是我不小心使用了半透明颜色作为脚手架背景颜色：

const Color COLOR_DARK_GREY = Color.fromRGBO(31, 31, 31, 100);

不透明度值从 0.0 到 1.0，所以这导致我有一个半透明的颜色。相反，我想要这样的东西：

const Color COLOR_DARK_GREY = Color.fromRGBO(20, 20, 20, 1);

有了这个，过渡就会正常工作，而且在路线之间过渡时，我不会得到奇怪的颜色或以前背景的显示。

如何在脚手架页面之间设置Navigator动画背景颜色

2 个答案: