To limit the InteractiveViewer
boundary, you can put it in a Column
, put the below panel inside an Expanded
widget and set the width and height of the inside Container
.
Working code:
class SomeScreen extends StatefulWidget {
@override
_SomeScreenState createState() => _SomeScreenState();
}
class _SomeScreenState extends State<SomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
height: 220,
child: InteractiveViewer(
minScale: 1,
maxScale: 3,
child: Container(
color: Colors.cyanAccent,
padding: EdgeInsets.symmetric(horizontal: 5),
child: GridView.count(
crossAxisCount: 10,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
children: List<Widget>.generate(
50,
(index) => Container(
width: 10,
height: 10,
color: Colors.red,
),
),
),
),
),
),
Expanded(
child: Container(
color: Colors.white,
height: double.infinity,
width: double.infinity,
child: Text("HELLO"),
),
)
],
),
);
}
}
Demo video:
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…