我正在使用Ink.image小部件，因為我想在影像上產生飛濺/漣漪效果，但是如果我將它與Hero小部件一起使用，它會給出錯誤，即Material未找到小部件祖先，這是不正確的，因為Scaffold它是一個Material小部件，但我也嘗試在Material小部件下方顯式添加小InkWell部件，但沒有任何反應它仍然沒有檢測到它。
import 'package:flutter/material.dart';
void main() => runApp(const App());
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light().copyWith(
splashColor: Colors.amber.withAlpha(150),
highlightColor: Colors.transparent,
),
home: const Home(),
);
}
}
class Home extends StatelessWidget {
const Home({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Home"),
),
body: Center(
child: InkWell(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const Detail(),
),
);
},
child: SizedBox(
width: 100,
height: 100,
child: Hero(
tag: "tag",
child: Ink.image(
image: const NetworkImage(
"https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png",
),
),
),
),
),
),
);
}
}
class Detail extends StatelessWidget {
const Detail({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Detail"),
),
body: Hero(
tag: "tag",
child: Ink.image(
image: const NetworkImage(
"https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png",
),
),
),
);
}
}
我想要這種行為但沒有錯誤
Restarted application in 2,605ms.
I/flutter (13108): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (13108): The following assertion was thrown building Ink(bg: BoxDecoration(image:
I/flutter (13108): DecorationImage(NetworkImage("https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png",
I/flutter (13108): scale: 1.0), Alignment.center, scale 1.0, opacity 1.0, FilterQuality.low)), dirty, state:
I/flutter (13108): _InkState#82f44):
I/flutter (13108): No Material widget found.
I/flutter (13108): Ink widgets require a Material widget ancestor.
I/flutter (13108): In Material Design, most widgets are conceptually "printed" on a sheet of material. In Flutter's
I/flutter (13108): material library, that material is represented by the Material widget. It is the Material widget
I/flutter (13108): that renders ink splashes, for instance. Because of this, many material library widgets require that
I/flutter (13108): there be a Material widget in the tree above them.
I/flutter (13108): To introduce a Material widget, you can either directly include one, or use a widget that contains
I/flutter (13108): Material itself, such as a Card, Dialog, Drawer, or Scaffold.
I/flutter (13108): The specific widget that could not find a Material ancestor was:
I/flutter (13108): Ink
I/flutter (13108): The ancestors of this widget were:
I/flutter (13108): ...
I/flutter (13108): MediaQuery
I/flutter (13108): AnimatedBuilder
I/flutter (13108): FadeTransition
I/flutter (13108): IgnorePointer
I/flutter (13108): Positioned
I/flutter (13108): ...
I/flutter (13108):
I/flutter (13108): The relevant error-causing widget was:
I/flutter (13108): Ink Ink:file:///C:/Users/Burhan/Desktop/test/lib/main.dart:67:22
I/flutter (13108):
I/flutter (13108): When the exception was thrown, this was the stack:
I/flutter (13108): #0 debugCheckHasMaterial.<anonymous closure> (package:flutter/src/material/debug.dart:29:7)
I/flutter (13108): #1 debugCheckHasMaterial (package:flutter/src/material/debug.dart:50:4)
I/flutter (13108): #2 _InkState.build (package:flutter/src/material/ink_decoration.dart:300:12)
I/flutter (13108): #3 StatefulElement.build (package:flutter/src/widgets/framework.dart:4992:27)
I/flutter (13108): #4 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4878:15)
I/flutter (13108): #5 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5050:11)
I/flutter (13108): #6 Element.rebuild (package:flutter/src/widgets/framework.dart:4604:5)
I/flutter (13108): #7 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4859:5)
I/flutter (13108): #8 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:5041:11)
I/flutter (13108): #9 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4853:5)
I/flutter (13108): ... Normal element mounting (57 frames)
I/flutter (13108): #66 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3863:16)
I/flutter (13108): #67 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6435:36)
I/flutter (13108): #68 Element.updateChild (package:flutter/src/widgets/framework.dart:3592:18)
I/flutter (13108): #69 RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:5964:32)
I/flutter (13108): #70 MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:6460:17)
I/flutter (13108): #71 Element.updateChild (package:flutter/src/widgets/framework.dart:3570:15)
I/flutter (13108): #72 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4904:16)
I/flutter (13108): #73 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5050:11)
I/flutter (13108): #74 Element.rebuild (package:flutter/src/widgets/framework.dart:4604:5)
I/flutter (13108): #75 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2667:19)
I/flutter (13108): #76 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:882:21)
I/flutter (13108): #77 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:378:5)
I/flutter (13108): #78 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1175:15)
I/flutter (13108): #79 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1104:9)
I/flutter (13108): #80 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1015:5)
I/flutter (13108): #81 _invoke (dart:ui/hooks.dart:148:13)
I/flutter (13108): #82 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:318:5)
I/flutter (13108): #83 _drawFrame (dart:ui/hooks.dart:115:31)
I/flutter (13108):
I/flutter (13108): ════════════════════════════════════════════════════════════════════════════════════════════════════
uj5u.com熱心網友回復：
嘗試這個：
用 Material 包裹它，因為它必須有一個 Material 小部件作為祖先。Material 小部件是實際繪制墨水反應的地方。這符合材料設計前提，其中材料實際上是通過傳播墨水對觸摸做出反應。
Widget build(BuildContext context) {
return Hero(
child: Material(child: Ink.image())}
uj5u.com熱心網友回復：
void main() => runApp(const App());
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Home"),
),
body: Center(
child: InkWell(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const Detail(),
),
);
},
child: SizedBox(
width: 100,
child: Hero(
tag: "tag",
child: Material(
child: Ink.image(
height: 100,
image: Image.network(
"https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png",
).image,
),
),
),
),
),
),
);
}
}
class Detail extends StatelessWidget {
const Detail({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Detail"),
),
body: Hero(
tag: "tag",
child: Material(
child: Ink.image(
image: Image.network(
"https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png",
).image),
),
),
);
}
}
所以從這里的這個答案中，我觀察到用小部件包裝的Hero小部件不一定用Material小部件包裝，因此您必須再次用小部件重新包裝 Hero 小部件的子小Material部件。
uj5u.com熱心網友回復：
試試這個：
Stack(
children: [
Positioned.fill(
child: Container(
decoration: const BoxDecoration(color: Colors.blue),
child: Image.network(
"https://storage.googleapis.com/cms-storage- bucket/0dbfcc7a59cd1cf16282.png"),
),
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(onTap: () {}),
),
),
])
uj5u.com熱心網友回復：
試試下面的代碼，只需Ink.image()用材料小部件包裝你
你的Home小部件：
class Home extends StatelessWidget {
const Home({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Home"),
),
body: Center(
child: InkWell(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const Detail(),
),
);
},
child: SizedBox(
width: 100,
child: Hero(
tag: "tag",
child: Material(
child: Ink.image(
height: 100,
image: Image.network(
"https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png",
).image,
),
),
),
),
),
),
);
}
}
您的Detail小部件：
class Detail extends StatelessWidget {
const Detail({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Detail"),
),
body: Hero(
tag: "tag",
child: Material(
child: Ink.image(
image: Image.network(
"https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png",
).image),
),
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/515981.html
標籤：扑镖材料设计
上一篇：預期型別為“Map<String,String?>”的值，但在升級到null安全性后在顫振中得到了型別為“Null”的值之一