Flutter：AnimatedContainer实现导航侧边栏

导航侧边栏

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}):super(key: key);@overrideWidget build(BuildContext context) {return const MaterialApp(title: 'Flutter Demo',home: MyHomePage(),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({Key? key}):super(key: key);@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {bool flag = true;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('标题'),),body: Stack(children: [ListView(children: [Container(width: 300,height: 100,color: Colors.blue,child: Text('我是页面里的内容1'),),Container(width: 300,height: 100,color: Colors.red,child: Text('我是页面里的内容2'),),],),Positioned(left: 0,top: 0,bottom: 0,child: AnimatedContainer(width: 200, // 更改宽度height: double.infinity, // 高度无限大color: Color.fromRGBO(256, 256, 256, .8),duration: const Duration(milliseconds: 300), // 动画时长// Matrix4.translationValues(x,y,z) 位置偏移transform:flag ? Matrix4.translationValues(-200, 0, 0):Matrix4.translationValues(0, 0, 0),child: const Column(children: [Text('导航1',style: TextStyle(color: Colors.white),),Text('导航2',style: TextStyle(color: Colors.white),),Text('导航3',style: TextStyle(color: Colors.white),),],),),),],),floatingActionButton: FloatingActionButton(onPressed: (){flag = !flag;setState(() {});},child: const Icon(Icons.add),),);}
}

在这里插入图片描述

如果想让侧边栏把标题盖上需要将Stack包裹Scaffold

class _MyHomePageState extends State<MyHomePage> {bool flag = true;@overrideWidget build(BuildContext context) {return Stack(children: [Scaffold(appBar: AppBar(title: const Text('标题'),),body: Stack(children: [ListView(children: [Container(width: 300,height: 100,color: Colors.blue,child: Text('我是页面里的内容1'),),Container(width: 300,height: 100,color: Colors.red,child: Text('我是页面里的内容2'),),],),],),floatingActionButton: FloatingActionButton(onPressed: (){flag = !flag;setState(() {});},child: const Icon(Icons.add),),),Positioned(left: 0,top: 0,bottom: 0,child: AnimatedContainer(width: 200, // 更改宽度height: double.infinity, // 高度无限大color: Color.fromRGBO(256, 256, 256, .8),duration: const Duration(milliseconds: 300), // 动画时长// Matrix4.translationValues(x,y,z) 位置偏移transform:flag ? Matrix4.translationValues(-200, 0, 0):Matrix4.translationValues(0, 0, 0),child: const Column(children: [Text('导航1',style: TextStyle(color: Colors.white),),Text('导航2',style: TextStyle(color: Colors.white),),Text('导航3',style: TextStyle(color: Colors.white),),],),),),],);}
}