FLUI

# List

List view related widgets.

# FLListTile

FLListTile adds a click highlight color to ListTile.

FLListTile(
    title: Text('账号管理'),
    trailing: Icon(Icons.navigate_next),
    onTap: (){},
)

# FLSliverPersistentHeaderWidgetBuilder

FLSliverPersistentHeaderWidgetBuilder will wrap the widget to achieve the effect of sticky header

FLSliverPersistentHeaderWidgetBuilder(
  overlapsContent: false,
  builder: (context, state) {
    return Container(
      color: themeData.brightness == Brightness.light
          ? Color.fromRGBO(246, 246, 246, 1)
          : themeData.cardColor,
      height: 50,
      child: Row(
        children: <Widget>[
          SizedBox(width: 15),
          Text('Header #$headerIndex')
        ],
      ),
    );
  },
  content: SliverList(
    delegate: SliverChildBuilderDelegate(
        (context, i) => FLListTile(
              leading: CircleAvatar(
                child: Text('${i + 1}'),
              ),
              title: Text('List tile ${i + 1}'),
            ),
        childCount: 15),
  ),
)

# FLStaticListView

FLStaticListView can bind some static configuration data models, it is usually used in setting pages. The models involved are:

  • FLStaticSectionData is the area object model for static lists. Each section area has a default header. You can set the height and title, or you can hide it by setting the height of the header to 0.
  • FLItemData is the data object model bound to each table cell in the static list. You can set the type (normal, button, custom), title, subtitle, accessory view (arrow, check mark, Switch widget etc.), the text next to the accessory view, or directly customize the accessory view.

const List<FLStaticSectionData> listData = [
     FLStaticSectionData(
       headerTitle: '账号',
       itemList: [
         FLStaticItemData(
           title: '账号管理',
           accessoryType: FLStaticListCellAccessoryType.accDetail,
           onTap: handleTap
         ),
         FLStaticItemData(
             title: '账号与安全',
             accessoryType: FLStaticListCellAccessoryType.accDetail,
             onTap: handleTap
         ),
       ]
     ),
     FLStaticSectionData(
       headerTitle: '设置',
       itemList: [
         FLStaticItemData(
             title: '推送通知设置',
             accessoryType: FLStaticListCellAccessoryType.accDetail,
             accessoryString: '全部通知',
             onTap: handleTap
         ),
         FLStaticItemData(
             title: '护眼模式',
             accessoryType: FLStaticListCellAccessoryType.accSwitch,
             onChanged: onChanged,
             switchValue: _switchValue,
         ),
         FLStaticItemData(
             title: '自动清理缓存',
             subtitle: '每 10 天清理一次',
             accessoryType: FLStaticListCellAccessoryType.accCheckmark,
             onTap: handleTap,
             selected: true,
         )
       ]
     ),
     FLStaticSectionData(
       itemList: [
         FLStaticItemData(
             cellType: FLStaticListCellType.button,
             buttonTitle: 'Apply',
             buttonTitleColor: Colors.blue,
             onButtonPressed: () {
               print('button pressed');
             }
         ),
         FLStaticItemData(
             cellType: FLStaticListCellType.button,
             buttonTitle: 'Delete',
             buttonTitleColor: Colors.red,
             onButtonPressed: () {
               print('button pressed');
             }
         )
       ]
     )
];

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Static List'),
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,//Color.fromRGBO(246, 246, 246, 1),
        child: FLStaticListView(
          shrinkWrap: true,
          sections: _buildList(),
        )
      )
    );
  }

# API

# FLListTile

property description type default value
onTap tap callback GestureTapCallback
onLongPress long press callback GestureLongPressCallback
backgroundColor background color Color

# FLSliverPersistentHeaderWidgetBuilder

property description type default value
builder header widget builder FLSliverPersistentHeaderBuilder
content content widget Widget
overlapsContent header overlaps content bool false

# FLStaticListView

property description type default value
headerTitle header title string String
headerTitleStyle header title text style TextStyle
headerHeight header height double
headerTitleIntent header title intent double 20
headerBackgroundColor header background color Color Colors.transparent
itemList content cell item data list List<FLStaticItemData>

# FLStaticItemData

property description type default value
cellType cell type FLStaticListCellType .normal
leading leading widget Widget
title title string String
titleStyle title text style TextStyle
subtitle subtitle String
subtitleStyle subtitle text style TextStyle
accessoryType accessory type FLStaticListCellAccessoryType .accNone
accessoryString accessory widget text String
customTrailing custom trailing widget Widget
cellColor cell color Color
onTap tap callback VoidCallback
selected selected bool false
accItemValue accessory item value bool false
onChanged accessory item value changed callback ValueChanged<bool>
buttonTitle button title String
buttonColor button color Color
buttonTitleColor button title color Color
onButtonPressed button pressed callback VoidCallback
customizeContent custom content widget Widget

← Theme →