flutter 点击可展开收缩组件ExpansionTile(类似点击展开消息栏)

ゞ浴缸里的玫瑰 2021-07-24 22:14 1318阅读 0赞

可展开组件
    	 ExpansionTile(
               title:Text("不点击时显示"),
               leading: ,    首部组件
               backgroundColor: Colors.grey,  展开时的背景颜色
               onExpansionChanged:     变化回调
               trailing:       末尾组件
               initiallyExpanded:false;  是否默认展开,默认为false 
               children: <Widget>[展开时的组件内容],
               
             )

代码示例:

import 'package:flutter/gestures.dart';
    import "package:flutter/material.dart";
    import 'package:flutter/rendering.dart';
    import "drag.dart";
    import 'dart:ui';
    
    import 'page/1.dart';
    import 'page/2.dart';
    import 'page/3.dart';
    import 'xuan.dart';
    
    void main()
    { 
      runApp(App());
    }
    class App extends StatelessWidget { 
      const App({ Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) { 
        return App2();
      }
    }
    
    class App2 extends StatefulWidget { 
      App2({ Key key}) : super(key: key);
    
      @override
      _AppState createState() => _AppState();
    }
    
    class _AppState extends State<App2> with SingleTickerProviderStateMixin { 
    
      // List _page=[Home3(),Home2(),Home4()];
      // int index=0;
      TabController con;
    
      @override
      void initState() { 
        // TODO: implement initState
        super.initState();
        con=new TabController(length: 3, vsync: this);
      }
    
      @override
      void dispose() { 
        // TODO: implement dispose
        super.dispose();
        con.dispose();
      }
    
      @override
      Widget build(BuildContext context) { 
        return  MaterialApp(
          home:Scaffold(
            appBar:AppBar(
              title: Text('小案例'),
            ),
            
            body:Home(),
          
          //去掉右上角的debug贴纸
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue
          ),
          );
      }
    }
    
    
    class Home extends StatefulWidget { 
    
      @override
      _HomeState createState() => _HomeState();
    }
    
    class _HomeState extends State<Home> { 
      
    
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          // width: double.infinity,
           child:Center(
           //展开收缩组件
             child: ExpansionTile(
               title:Text("不点击时显示"),
               leading: Icon(Icons.ac_unit),
               backgroundColor: Colors.grey, //展开的颜色
               children: <Widget>[
                 ListTile(
                   title: Text('哇啦啦'),
                   subtitle: Text('二级'),
                 )
               ],
               
             ),
           )
           
        );
      }
    }