12_flutter_ExpansionTile,tooltip,打包

最新推荐文章于 2024-04-25 08:57:04 发布

weixin_34037173

最新推荐文章于 2024-04-25 08:57:04 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：https://juejin.im/post/5c878288e51d4523c06c590a

本文详细介绍了Flutter中ExpansionTile组件的使用方法，通过构建多层次的可折叠列表项，展示了如何组织复杂的数据结构。同时，文章还讲解了Tooltip组件的应用，通过添加提示信息提升用户体验。代码实例丰富，便于读者理解和实践。

1_ExpansionTile

import 'package:flutter/material.dart';

void main() {
  runApp(ExpansionTileSample());
}

class ExpansionTileSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ExpansionTile'),
        ),
        body: ListView.builder(
          itemBuilder: (BuildContext context, int index) => EntryItem(data[index]),
          itemCount: data.length,
        ),
      ),
    );
  }
}
class Entry {
  Entry(this.title, [this.children = const <Entry>[]]);
  final String title;
  final List<Entry> children;
}

final List<Entry> data = <Entry>[
  Entry('电压',
    <Entry>[
      Entry('直流',
        <Entry>[
          Entry('交流'),
          Entry('脉冲'),
          Entry('越变'),
        ],
      ),
      Entry('逆变'),
      Entry('下冲'),
    ],
  ),
  Entry('升压',
    <Entry>[
      Entry('升降压'),
      Entry('降压'),
    ],
  ),
  Entry('水果',
    <Entry>[
      Entry('苹果'),
      Entry('梨子'),
      Entry('香蕉',
        <Entry>[
          Entry('flutter'),
          Entry('kotlin'),
          Entry('java'),
          Entry('c'),
        ],
      ),
    ],
  ),
];


class EntryItem extends StatelessWidget {
  const EntryItem(this.entry);

  final Entry entry;

  Widget _buildTiles(Entry root) {
    if (root.children.isEmpty)
      return ListTile(title: Text(root.title));
    return ExpansionTile(
      key: PageStorageKey<Entry>(root),
      title: Text(root.title),
      children: root.children.map(_buildTiles).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return _buildTiles(entry);
  }
}

复制代码

2_tooltip

import 'package:flutter/material.dart';

void main() => runApp(SnackBarDemo());

class SnackBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tooltip Demo'),
        ),
        body: SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton( 
        child: Tooltip(
           message: '提示成功',
           height: 10.0,
           child: Text('data'),
         ),
        onPressed: () {
        
        },
       
      ),
    );
  }
}
复制代码