用户登录

ExpansionPanel,收缩面板 .. 就是可以展开,还可以收缩起来的一块东西 .. 在这个 ExpansionPanel 的演示页面上,我们可以在 Column 这个小部件里,放一个 ExpansionPanelList .. 它里面的东西就是一些收缩面板 .. 把它孩子们放在它的 children 属性里 ..

每个收缩面板项目一般都是一个 ExpansionPanel .. 添加一个这样的小部件 .. 每个面板需要一个头部 .. 一个主体 .. 还有一个表示收缩状态的属性 ..

先添加一个 headerBuilder .. 用它去构建收缩面板的头部 .. 方法接收一个 BuildContext 类型的 context 参数 .. 还有一个 bool 类型的 isExpanded .. 它表示的就是面板的收缩的状态 ..

方法 return 的东西就是面板的头部 .. 可以使用一个 Container .. 里面先设置一下 padding .. 添加点内边距 .. 大小是 16.0 ..

然后它的 child 用一个简单的 Text .. 要显示的文字是 Panel A .. 可以再设置一下这个文字的样式 .. Theme .of context . 用一下主题里的 textTheme 里面的 title 这个样式 ..

body

面板还需要一个主体 .. 就是面板在展开状态下要显示的内容 .. 添加一个 body 属性设置一下它的主体内容 .. 一个 Container .. 里面先添加点内边距 .. 大小是 16.0 .. 然后设置一下 width .. double.infinity ..

容器的 child 可以用一个 Text .. 显示的文字是 Content for Panel A.

isExpanded

现在界面上显示的就是一个收缩面板 .. 默认它是收起的状态 .. 这个状态是 isExpanded 属性控制的 .. 添加一个这样的属性 .. 把它的值设置成 true .. 这个面板就会是展开的状态 .. 展开以后会显示面板里面的主体内容 ..

ExpansionPanel:收缩面板《 Flutter 移动应用:对话框 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点