flutter - DrawerLayout:如何在颤动中制作这个自定义布局
问题描述
我有一个抽屉,我想在其中实现下面屏幕截图中发布的布局。
AllTasks, Today, Complete and Incomplete
与numbers
是固定的。用户不能添加这些。已经被我加了。CreateList and Settings
也是。
MyList
这是用户添加的,他可以添加更多像食物、运动、阅读等。
Divider
同样,可能在 1 行或 3 行之后显示为组。
我应该使用ListView
吗?有什么建议,请。
解决方案
你有几个方法可以做到这一点,第一个使用 ListView 像这样:
drawer: new Drawer(
child: new Column(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: const Text('Test Widget'),
accountEmail: const Text('test.widget@example.com'),
margin: EdgeInsets.zero,
onDetailsPressed: () {},
),
new Expanded(
child: new ListView(
padding: const EdgeInsets.only(top: 8.0),
children: <Widget>[
new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: _drawerContents.map((String id) {
return new ListTile(
leading: new CircleAvatar(child: new Text(id)),
title: new Text('Drawer item $id'),
);
}).toList(),
),
// The drawer's "details" view.
new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new ListTile(
leading: const Icon(Icons.add),
title: const Text('Add account'),
),
new ListTile(
leading: const Icon(Icons.settings),
title: const Text('Manage accounts'),
),
],
),
],
),
),
],
),
)
但它只对有限数量的列表项有效,因为该 ListView 的所有项目都是一次呈现的。
另一种方法是使用这样的 ListView.builder :
drawer: new Drawer(
child: new Column(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: const Text('Test Test'),
accountEmail: const Text('test@example.com'),
margin: EdgeInsets.zero,
onDetailsPressed: () {},
),
new Expanded(
child: new ListView.builder(
itemBuilder: (BuildContext context, int index) =>
new EntryItem(data[index]),
itemCount: data.length,
),
),
],
),
),
这样,您的列表元素将在滚动期间一一呈现。您应该为硬编码元素和变量元素创建一个模型,然后创建不同的 ListTile(在示例 EntryItem 中)。
如果您需要更多详细信息,请告诉我。
PS。下面的 EntryItem 示例:
class EntryItem extends StatelessWidget {
const EntryItem(this.entry);
final Entry entry;
Widget _buildTiles(Entry root) {
if(root.counter != null) {
return new ListTile(
leading: Icon(root.icon),
title: Text(root.title),
trailing: new Text(root.counter)
);
} else {
return new ListTile(
leading: Icon(root.icon),
title: Text(root.title),
);
}
}
@override
Widget build(BuildContext context) {
return _buildTiles(entry);
}
}
推荐阅读
- spring - When dows 'this' keyword points ? In rumtime or compile time?
- javascript - 如何修复此内存泄漏监视器功能以避免最大调用堆栈循环?
- c++ - 中断到达时如何退出 sleep()?
- php - Assign an array to the 'name' attribute in an HTML form
- ckeditor - ckeditor 通过 id 获取元素
- c# - System.IO.FileNotFoundException 上 System.Runtime.CompilerServices.AsyncTaskMethodBuilder
- maximo - 如何在 MAXIMO 中管理货架到期的商品
- android - Android ListView - 为不可见的项目调用 getView
- javascript - 使用来自 JavaScript 的每个请求向服务器端发送信息
- python - 如何修改列表以使其与 Python 中的不同列表相同