Flutter：AnimatedContainer实现导航侧边栏

导航侧边栏

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}):super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}):super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;
  @override
  Widget 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;
  @override
  Widget 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),),
              ],
            ),
          ),
        ),
      ],
    );
  }
}