Flutter：FloatingActionButton移至独立类后丢失阴影与触摸动画的解决办法

嘿，我知道你遇到的问题了！这是因为你不小心在同一个页面里嵌套了两个Scaffold组件，导致内部的FAB无法正确继承Material主题的样式配置，自然就丢失了阴影和触摸波纹动画。

问题根源 #

你的MyHomePage已经创建了一个Scaffold，而TestItem1又额外创建了另一个Scaffold。Flutter的设计逻辑里，一个页面通常只需要一个Scaffold来统一管理导航栏、主体内容和浮动按钮等结构，嵌套Scaffold会打乱主题样式的继承链，让内部的FAB失去原本的视觉和交互效果。

解决方案：移除嵌套的Scaffold #

我们只需要保留外层的Scaffold，把TestItem1改成只返回主体内容的普通Widget，再把FAB移到外层Scaffold中即可。

修改后的Main.dart #

import 'package:test_app/TestItem1.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new TestItem1(),
      // 将FAB移到外层Scaffold中
      floatingActionButton: new FloatingActionButton(
        tooltip: 'Increment',
        onPressed: null,
        child: new Icon(Icons.add),
      ),
    );
  }
}

修改后的TestItem1.dart #

import 'package:flutter/material.dart';

class TestItem1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 移除嵌套的Scaffold，只返回主体内容
    return new Center(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Text(
            'test 1',
          ),
          new Text(
            'test1',
            style: Theme.of(context).textTheme.display1,
          ),
        ],
      ),
    );
  }
}

额外说明：如果需要组件复用FAB #

如果你希望TestItem1能复用FAB的逻辑，可以让它暴露一个返回FAB的方法，或者通过Widget参数传递。比如：

在TestItem1.dart中添加一个方法：

FloatingActionButton buildFab() {
  return FloatingActionButton(
    tooltip: 'Increment',
    onPressed: null,
    child: Icon(Icons.add),
  );
}

然后在Main.dart中调用：

floatingActionButton: TestItem1().buildFab(),

这样既保留了组件的复用性，又不会破坏Scaffold的结构。

内容的提问来源于stack exchange，提问作者matthew5025