mirror of
https://github.com/flutter/flutter
synced 2024-10-13 19:52:53 +00:00
Merge pull request #2297 from HansMuller/list_dividers
Added ListItem.divideItems() - inserts "full bleed" dividers between items
This commit is contained in:
commit
7ee1ee31d1
|
@ -21,9 +21,10 @@ class ListDemoState extends State<ListDemo> {
|
|||
|
||||
ScaffoldFeatureController _bottomSheet;
|
||||
ListDemoItemSize _itemSize = ListDemoItemSize.threeLine;
|
||||
bool _dense = true;
|
||||
bool _showAvatar = true;
|
||||
bool _showIcon = false;
|
||||
bool _dense = false;
|
||||
bool _showAvatars = true;
|
||||
bool _showIcons = false;
|
||||
bool _showDividers = false;
|
||||
bool _reverseSort = false;
|
||||
List<String> items = <String>[
|
||||
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'
|
||||
|
@ -77,10 +78,10 @@ class ListDemoState extends State<ListDemo> {
|
|||
dense: true,
|
||||
primary: new Text('Show Avatar'),
|
||||
right: new Checkbox(
|
||||
value: _showAvatar,
|
||||
value: _showAvatars,
|
||||
onChanged: (bool value) {
|
||||
setState(() {
|
||||
_showAvatar = value;
|
||||
_showAvatars = value;
|
||||
});
|
||||
_bottomSheet?.setState(() { });
|
||||
}
|
||||
|
@ -90,10 +91,23 @@ class ListDemoState extends State<ListDemo> {
|
|||
dense: true,
|
||||
primary: new Text('Show Icon'),
|
||||
right: new Checkbox(
|
||||
value: _showIcon,
|
||||
value: _showIcons,
|
||||
onChanged: (bool value) {
|
||||
setState(() {
|
||||
_showIcon = value;
|
||||
_showIcons = value;
|
||||
});
|
||||
_bottomSheet?.setState(() { });
|
||||
}
|
||||
)
|
||||
),
|
||||
new ListItem(
|
||||
dense: true,
|
||||
primary: new Text('Show Dividers'),
|
||||
right: new Checkbox(
|
||||
value: _showDividers,
|
||||
onChanged: (bool value) {
|
||||
setState(() {
|
||||
_showDividers = value;
|
||||
});
|
||||
_bottomSheet?.setState(() { });
|
||||
}
|
||||
|
@ -132,10 +146,10 @@ class ListDemoState extends State<ListDemo> {
|
|||
return new ListItem(
|
||||
isThreeLine: _itemSize == ListDemoItemSize.threeLine,
|
||||
dense: _dense,
|
||||
left: _showAvatar ? new CircleAvatar(child: new Text(item)) : null,
|
||||
left: _showAvatars ? new CircleAvatar(child: new Text(item)) : null,
|
||||
primary: new Text('This item represents $item'),
|
||||
secondary: secondary,
|
||||
right: _showIcon ? new Icon(icon: 'action/info', color: Theme.of(context).disabledColor) : null
|
||||
right: _showIcons ? new Icon(icon: 'action/info', color: Theme.of(context).disabledColor) : null
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -153,6 +167,11 @@ class ListDemoState extends State<ListDemo> {
|
|||
itemSizeText = 'Three-Line';
|
||||
break;
|
||||
}
|
||||
|
||||
Iterable<Widget> listItems = items.map((String item) => buildListItem(context, item));
|
||||
if (_showDividers)
|
||||
listItems = ListItem.divideItems(context: context, items: listItems);
|
||||
|
||||
return new Scaffold(
|
||||
key: scaffoldKey,
|
||||
toolBar: new ToolBar(
|
||||
|
@ -177,7 +196,7 @@ class ListDemoState extends State<ListDemo> {
|
|||
),
|
||||
body: new Block(
|
||||
padding: new EdgeDims.all(_dense ? 4.0 : 8.0),
|
||||
children: items.map((String item) => buildListItem(context, item)).toList()
|
||||
children: listItems.toList()
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
@ -41,6 +41,32 @@ class ListItem extends StatelessComponent {
|
|||
final GestureTapCallback onTap;
|
||||
final GestureLongPressCallback onLongPress;
|
||||
|
||||
/// Add a one pixel border in between each item. If color isn't specified the
|
||||
/// dividerColor of the context's theme is used.
|
||||
static Iterable<Widget> divideItems({ BuildContext context, Iterable<Widget> items, Color color }) sync* {
|
||||
assert(items != null);
|
||||
assert(color != null || context != null);
|
||||
|
||||
final Color dividerColor = color ?? Theme.of(context).dividerColor;
|
||||
final Iterator<Widget> iterator = items.iterator;
|
||||
final bool isNotEmpty = iterator.moveNext();
|
||||
|
||||
Widget item = iterator.current;
|
||||
while(iterator.moveNext()) {
|
||||
yield new DecoratedBox(
|
||||
decoration: new BoxDecoration(
|
||||
border: new Border(
|
||||
bottom: new BorderSide(color: dividerColor)
|
||||
)
|
||||
),
|
||||
child: item
|
||||
);
|
||||
item = iterator.current;
|
||||
}
|
||||
if (isNotEmpty)
|
||||
yield item;
|
||||
}
|
||||
|
||||
TextStyle primaryTextStyle(BuildContext context) {
|
||||
final ThemeData theme = Theme.of(context);
|
||||
final TextStyle style = theme.text.subhead;
|
||||
|
|
Loading…
Reference in a new issue