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

可展开组件
	 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('二级'),
             )
           ],
           
         ),
       )
       
    );
  }
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值