Sliver

sliver

  • SingleChildScrollView
//單一child
SingleChildScrollView(
  //指定方向,默認(rèn)豎直
  scrollDirection: Axis.horizontal,
  //需滾動(dòng)的child
  child: Text('超級(jí)多的文字,超級(jí)多的文字' * 1000, softWrap: true),
),
  • ListView

直接顯示 ,children: Widget 數(shù)組

List<String> _list = ['1', '2', '3', '4'];

ListView(
  children: <Widget>[
    Text(_list[0]),
    Text(_list[1]),
    Text(_list[2]),
    Text(_list[3]),
    ],
),

ListView(
 children: _list
  .map((s) => ListTile(
                title: Text(s),
              ))
  .toList(),
),

ListView(
  //List<Widget>
  children: List.generate(
    _list.length,
    (index) => ListTile(
                title: Text(_list[index]),
               )
  ),
),

ListView.builder
以每一個(gè)條目的形式展示
itemBuilder:(context,index)=>

List<String> _list = ['1', '2', '3', '4'];

ListView.builder(
  //(context, index)=>widget
  itemBuilder: (context, index) => ListTile(
    title: Text(_list[index]),
  ),
  //指定item的高度
  itemExtent: 50.0,
  itemCount: _list.length,
),

ListView.custom 代理

//設(shè)置ListView整體代理
ListView.custom(
    childrenDelegate: SliverChildListDelegate(
        //List<Widget>
        List.generate(
          _list.length,
          (index) => ListTile(
            title: Text(_list[index]),
          ),
    ),
  ),
),

//設(shè)置條目代理,注意,需指定childCount,否則會(huì)出現(xiàn)越界
ListView.custom(
  childrenDelegate: SliverChildBuilderDelegate(
    //(context,index) => widget
    (context, index) => ListTile(
      title: Text(_list[index]),
    ),
    childCount: _list.length,
  ),
),

ListView.separated 添加分割線

List<String> _list = ['1', '2', '3', '4'];

ListView.separated(
  itemBuilder: (context, index) => ListTile(
    title: Text(_list[index]),
  ),
  separatorBuilder: (context, index) => Padding(
    child: Divider(
       color: Colors.grey,
       height: 0.5,
    ),
    padding: const EdgeInsets.symmetric(horizontal: 16.0),
    ),
  itemCount: _list.length),

ExpansionTile 可展開(kāi)的列表

//單個(gè)
ExpansionTile(
    leading: Icon(Icons.add),
    trailing: Icon(Icons.delete),
    //展開(kāi)之后的顏色
    backgroundColor: Colors.red,
    onExpansionChanged: (expand) {
      if (expand) {
         print("expand:展開(kāi)啦");
      } else {
         print("expand:合住啦");
      }
    },
    //true:默認(rèn)是展開(kāi) false:默認(rèn)是關(guān)閉
    initiallyExpanded: true,
    title: Text('標(biāo)題'),
    children: List.generate(
        _list.length,
          (index) => ListTile(
              title: Text(_list[index]),
        ),
    ),
),

//多個(gè)
@override
Widget build(BuildContext context) {
  Widget getChild() {
    return ExpansionTile(
      leading: Icon(Icons.add),
      trailing: Icon(Icons.delete),
      //展開(kāi)之后的顏色
      backgroundColor: Colors.red,
      onExpansionChanged: (expand) {
        if (expand) {
          print("expand:展開(kāi)啦");
        } else {
            print("expand:合住啦");
        }
      },
      //true:默認(rèn)是展開(kāi) false:默認(rèn)是關(guān)閉
      initiallyExpanded: true,
      title: Text('標(biāo)題'),
      children: List.generate(
        _list.length,
          (index) => ListTile(
            title: Text(_list[index]),
          ),
        ),
    );
  }

  return SafeArea(
    child: Scaffold(
      body: ListView.builder(
        itemBuilder: (context, index) => getChild(),
        itemCount: _list.length,
      ),
    ),
  );
}
  • GridView

//gridDelegate 限定個(gè)數(shù)

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    //單行的個(gè)數(shù)
    crossAxisCount: 5,
    //主軸間距
    mainAxisSpacing: 10,
    //相對(duì)軸間距
    crossAxisSpacing: 20,
    //寬高比
    childAspectRatio: 1),
    children: List.generate(
       _list.length,
        (index) => Container(
          color: Colors.yellow,
          alignment: Alignment.center,
          child: Text(_list[index]),
        ),
      ),
),

//gridDelegate 限定寬度

GridView(
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    //單個(gè)cell的最大寬度(只是一個(gè)約數(shù),舉例
    //500 占據(jù)屏幕寬度比一半大,又比全屏小,則會(huì)計(jì)算一排顯示兩個(gè)
    //600 比全屏大,則一排顯示1個(gè) )
    maxCrossAxisExtent: 500,
    //主軸間距
    mainAxisSpacing: 10,
    //相對(duì)軸間距
    crossAxisSpacing: 20,
    //寬高比
    childAspectRatio: 1),
      children: List.generate(
        _list.length,
          (index) => Container(
            color: Colors.yellow,
            alignment: Alignment.center,
             child: Text(_list[index]),
          ),
        ),
),

//GridView.builder 注意需要提供itemCount,否則如果列表太短,占不滿一屏,則會(huì)報(bào)越界錯(cuò)誤
GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 5,
    childAspectRatio: 1,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10),
      itemBuilder: (context, index) => Container(
        child: Text(_list[index]),
        color: Colors.yellow,
        alignment: Alignment.center,
      ),
    itemCount: _list.length,
),

GridView.builder(
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 100,
    childAspectRatio: 1,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10),
    itemBuilder: (context, index) => Container(
      child: Text(_list[index]),
      color: Colors.yellow,
      alignment: Alignment.center,
    ),
    itemCount: _list.length,
),

GridView.count(
  crossAxisCount: 4,
  crossAxisSpacing: 20,
  mainAxisSpacing: 10,
  childAspectRatio: 2.0,
  children: List.generate(
    _list.length,
      (index) => Container(
        color: Colors.greenAccent,
         alignment: Alignment.center,
        child: Text(_list[index]),
      ),
  ),
),

GridView.extent(
  maxCrossAxisExtent: 200,
  crossAxisSpacing: 20,
  mainAxisSpacing: 10,
  childAspectRatio: 2.0,
  children: List.generate(
    _list.length,
      (index) => Container(
        color: Colors.greenAccent,
        alignment: Alignment.center,
        child: Text(_list[index]),
    ),
  ),
),

GridView.custom

GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 4,
    childAspectRatio: 1,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10),
  childrenDelegate: SliverChildListDelegate(
    List.generate(
       _list.length,
        (index) => Container(
        child: Text(_list[index]),
        color: Colors.greenAccent,
        alignment: Alignment.center,
      ),
    ),
  ),
),

GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 4,
    childAspectRatio: 1,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) => Container(
      alignment: Alignment.center,
      color: Colors.greenAccent,
      child: Text(_list[index]),
    ),
    childCount: _list.length,
  ),
),

CustomScrollView 滑動(dòng)粘合劑

List<String> _list = ['1','2','3','4','5','6','7','8','9',];
List<String> _list1 = ['a','b','c','d','e','f','g','h','j','1','2','3',];

Widget getListItem(int index) {
  return ListTile(
    title: Text(_list1[index]),
  );
}

Widget getGridItem(int index) {
  return Container(
    child: Text(_list[index]),
    color: Colors.greenAccent,
    alignment: Alignment.center,
  );
}

CustomScrollView(
  slivers: <Widget>[
    SliverGrid(
      delegate: SliverChildBuilderDelegate(
        (context, index) => getGridItem(index),
      childCount: _list.length,
      ),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        childAspectRatio: 1),
      ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => getListItem(index),
          childCount: _list1.length,
        ),
      ),
  ],
),

添加滑動(dòng)返回

ScrollController _scrollController;

@override
void initState() {
  _scrollController = ScrollController();
  super.initState();
}

@override
void dispose() {
  _scrollController.dispose();
  super.dispose();
}

Scaffold(
  body: CustomScrollView(
    controller: _scrollController,
    physics: BouncingScrollPhysics(),
    slivers: <Widget>[
      SliverGrid(
        delegate: SliverChildBuilderDelegate(
          (context, index) => getGridItem(index),
            childCount: _list.length,
          ),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 5,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          childAspectRatio: 1),
        ),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (_, index) => getListItem(index),
            childCount: _list1.length,
          ),
        ),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      _scrollController.animateTo(0.0,
        duration: Duration(milliseconds: 100),
        curve: Curves.decelerate);
      },
    child: Icon(Icons.add),
      backgroundColor: Colors.greenAccent,
  ),
),
  • SliverAppBar
SliverAppBar(
  expandedHeight: 250,
  backgroundColor: Colors.yellow,
  leading: Icon(Icons.add),
  centerTitle: true,
  title: Text('這里是標(biāo)題'),
  //floating/snap 下滑時(shí)滑動(dòng)到一定比例,開(kāi)始滑動(dòng)SliverAppBar,直至
  //SliverAppBar全部滑出時(shí),下部分才能繼續(xù)滑動(dòng)
  floating: true,
  //必須配置floating屬性為false,否則報(bào)錯(cuò),添加為true的時(shí)候,SliverAppBar出
  //現(xiàn)一部分,則會(huì)根據(jù)向上滑或向下滑,彈出剩下部分
  snap: true,
  //title 是否會(huì)保留 true:保留,false不保留
  pinned: true,
  flexibleSpace: FlexibleSpaceBar(
    //隨著背景移動(dòng)的標(biāo)題
    title: Text('這是什么標(biāo)題'),
    collapseMode: CollapseMode.parallax,
      background: Image.asset(
        "images/homepage_title.jpg",
          fit: BoxFit.cover,
    ),
  ),
),

//占據(jù)一屏的位置
SliverFillRemaining(
  child: Center(
    child: Text('這個(gè)?'),
  ),
),
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容