flutter:view (九)-阿里云开发者社区

前言

在移动应用开发中，滚动组件是提升用户体验的重要元素。Flutter提供了一系列强大的滚动组件，使开发者能够轻松构建流畅且交互丰富的用户界面。本文将深入探讨Flutter中的多种滚动组件，包括SliverAppBar、PageView、NestedScrollView、ListView、GridView和SingleChildScrollView。

SliverAppBar

body: NestedScrollView(
      //   sliver  家庭组件
        headerSliverBuilder: (BuildContext context ,bool innerBoxIsScrolled){
          return [
              // buildSliverAppBar()
            SliverAppBar(title: Text('this is title'), centerTitle: true,),
          ];
        },
        body: buildBodyWidget(),
        ),

pageView

简单使用

import 'package:flutter/material.dart';
class ViewTest extends StatefulWidget {
  const ViewTest({Key? key}) : super(key: key);
  @override
  State<ViewTest> createState() => _ViewTestState();
}
class _ViewTestState extends State<ViewTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("view test"),
      ),
      body: PageView(
        scrollDirection: Axis.vertical, // 改变  滑动 方向
        children: [
          Center(
            child: Text(
              "this is first",
              style: Theme.of(context).textTheme.headlineLarge,
            ),
          ),
          Center(
            child: Text(
              "this is second",
              style: Theme.of(context).textTheme.headlineLarge,
            ),
          ),
          Center(
            child: Text(
              "this is third",
              style: Theme.of(context).textTheme.headlineLarge,
            ),
          ),
        ],
      ),
    );
  }
}

PageView.custom SliverChildBuilderDelegate fit: BoxFit.fill,

import 'package:flutter/material.dart';
class test extends StatefulWidget{
  const test({Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() =>_test();
}
class _test extends State<test> {
  PageController pageController = new PageController();
  double currentPage = 0;
  List<String> imgList=[
    "imgs/happy.webp",
    "imgs/laying.jpg",
    "imgs/noodle.jpg",
    "imgs/sleep.webp",
  ];
  void initState(){
    super.initState();
    pageController = new PageController(
      initialPage: 0,
      keepPage: true,
    );
    pageController.addListener(() {
      setState(() {
        currentPage = pageController.page!;
      });
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('滑动视图'),
      ),
      body: buildPageView(),
    );
  }
  buildPageView() {
    return Container(
      height: 200,
      width: 400,
      child: PageView.custom(
          controller: pageController,
          childrenDelegate: SliverChildBuilderDelegate((BuildContext context,int index){
              if(index==currentPage.floor()){
                return Transform(
                  alignment: Alignment.center,
                    transform: Matrix4.identity()..rotateX(currentPage-index)
                    ..rotateY(0.98),
                  child: buildItem(index)
                );
              }else if(index == currentPage.floor()+1){
                return Transform(
                alignment: Alignment.center,
                    transform:Matrix4.identity()
                    ..rotateX(currentPage-index)
                    ..rotateY(0.9),
                  child: buildItem(index),
                );
              }else{
                print("currentPage is $index");
                return buildItem(index);
              }
          },
          childCount: imgList.length
          ),
      ),
    );
  }
  buildItem(int index){
    print("index $index");
    return Container(
      child: Image.asset(
        "${imgList[index]}",
        fit: BoxFit.fill,
      ),
    );
  }
}
void  main(){
  runApp(const MaterialApp(
    home:test(),
  ));
}

pageview.builder

class _ViewTestState extends State<ViewTest> {
  @override
  Widget build(BuildContext context) {
  return PageView.builder(
        scrollDirection: Axis.vertical,
    itemCount: 10,
      itemBuilder: (context,index){
        return Center(
          child: Text(
           "this is ${index+1} page",
            style: Theme.of(context).textTheme.headlineLarge,
          ),
        );
      });
   }
}

实现无限下拉

思路使用 for 循环

import 'package:flutter/material.dart';
class ViewTest extends StatefulWidget {
  const ViewTest({Key? key}) : super(key: key);
  @override
  State<ViewTest> createState() => _ViewTestState();
}
class _ViewTestState extends State<ViewTest> {
  List<Widget> list = [];
  void initState() {
    super.initState();
    for (var i = 0; i < 10; i++) {
      list.add(
        Center(
          child: Text(
            "this is ${i + 1} page",
            style: TextStyle(fontSize: 40),
          ),
        ),
      );
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hello,flutter'),
      ),
      body: PageView(
          onPageChanged: (index) {
            if (index + 2 == list.length) {
              for (var i = 0; i < 10; i++) {
                setState(() {
                  list.add(
                    Center(
                      child: Text(
                        "this is ${i + 1} page",
                        style: TextStyle(fontSize: 40),
                      ),
                    ),
                  );
                });
              }
            }
          },
          scrollDirection: Axis.vertical,
          children: list),
    );
  }
}

NestedScorllVie

NestedScorllView 继承于 Custom ScrollView

import 'package:flutter/material.dart';
class test extends StatefulWidget{
  const test({Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() =>_test();
}
class _test extends State<test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('test nestScorllView')),
      body: NestedScrollView(
      //   sliver  家庭组件
        headerSliverBuilder: (BuildContext context ,bool innerBoxIsScrolled){
          return [
            SliverAppBar(title: Text('this is title'), centerTitle: true,),
          ];
        },
        body: Container(
          alignment: Alignment.center,
          color: Colors.grey,
          height: 1600,
          child: Text('this is test data'),
        ),
      ),
    );
  }
}
void  main(){
  runApp(MaterialApp(
    home:test(),
  ));
}

配合listview

import 'package:flutter/material.dart';
class test extends StatefulWidget{
  const test({Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() =>_test();
}
class _test extends State<test> with SingleTickerProviderStateMixin{
  late TabController tabController;
  @override
  void initState(){
    super.initState();
    //初始化控制器
    tabController=TabController(length: 3, vsync: this);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('test nestScorllView')),
      body: NestedScrollView(
      //   sliver  家庭组件
        headerSliverBuilder: (BuildContext context ,bool innerBoxIsScrolled){
          return [
              // buildSliverAppBar()
            SliverAppBar(title: Text('this is title'), centerTitle: true,),
          ];
        },
        body: buildBodyWidget(),
        ),
    );
  }
  buildBodyWidget(){
    return ListView.builder(itemBuilder: (BuildContext contest ,int index){
         return Container(
         color: Colors.grey[200],
         height: 100,
          child: Container(
          margin: EdgeInsets.only(left: 8,right: 8,top: 4,bottom: 4),
          padding: EdgeInsets.all(8),
          color: Colors.white,
          child: Text('this is test data'),
        ),
      );
      },
      // 注意为这个   在listview  .builder   前面
      itemCount:200,
    );
  }
}
void  main(){
  runApp(MaterialApp(
    home:test(),
  ));
}

CustomScrollView

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('test nestScorllView')),
       body:CustomScrollView(
    controller:  scrollController,
    slivers: [
      SliverAppBar(
    title: Text('title'),
    centerTitle: true,
    )
    ],
    )
    );
  }

SliverGrid buildSliverGrid(){
  return new SliverGrid(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 3.0,
        crossAxisCount: 2),
    delegate: SliverChildBuilderDelegate(
      (BuildContext context,int index){
        return Container(
          alignment: Alignment.center,
          color: Colors.grey[100*(index%9)],
          child: Text('grid item $index'),
        );
      },
      childCount: 20,
    ),
  );
}

ListView

简单使用

Widget buildListView(){
     return ListView(
       //  scorll direction   axis  .vertical  horizontal
       scrollDirection: Axis.vertical,
       //  默认为false   为true  时 滚动到底部
       reverse: false,
     // 回弹
       physics: BouncingScrollPhysics(),
       children: [
         Text('this is first'),
         Text('this is second'),
         Text('this is third'),
         Text('this is fourth'),
         Text('this is fifth'),
       ],
     );
  }

Widget buildListView2(){
  return ListView.builder(itemBuilder: (BuildContext contest ,int index) {
    return Container(
      color: Colors.grey[200],
      height: 100,
      child: Container(
        margin: EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 4),
        padding: EdgeInsets.all(8),
        color: Colors.cyan[100*(index % 9)],
        child: Text('this is test data'),
      ),
    );
  }
  );
  }

separator

return ListView.separated(
    itemCount: 100,
    itemBuilder: (BuildContext contest, int index) {
      return Container(
        color: Colors.grey[200],
        height: 100,
        child: Container(
          margin: EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 4),
          padding: EdgeInsets.all(8),
          color: Colors.cyan[100 * (index % 9)],
          child: Text(
            'this is test data ${index}',
            style: TextStyle(decoration: TextDecoration.none),
          ),
        ),
      );
    },
    separatorBuilder: (BuildContext context, int index) {
      return Divider(
        color: Colors.red,
        indent: 30,
        endIndent: 30,
        thickness: 10,
      );
    },
  );

懒加载的方式

Widget buildListView3() {
return ListView.custom(
    childrenDelegate:
    SliverChildBuilderDelegate((BuildContext context,int index){
     return new Container(
        height: 40,
color: Colors.cyan[100* (index % 9)],
);
},
      childCount:20,
    )
);
  }

使用图片加文字

简单使用文字和图片

return ListView(
      padding: EdgeInsets.fromLTRB(0,10,0,0),
      children: <Widget>[
// title
        ListTile(
          leading: Icon(Icons.home),
          title: Text('i am a home'),
          trailing: Icon(Icons.home),
        ),
//   加一个下划线
        Divider(),
        ListTile(
          leading: Icon(Icons.assignment),
          title: Text('i am a assignment'),
          subtitle:Text('i am a assignment2') ,
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.payment,color: Colors.red,),
          title: Text('i am a payment'),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.add_box),
          title: Text('i am a add_box'),
        ),
        Divider(),
      ],
    );

一张图片加一段文字

return ListView(
      children: [
        Image.asset('./assets/imgs/laying.jpg'),
        Container(
          padding: EdgeInsets.fromLTRB(0,10,0,0),
          child: Text('i am a photo',
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 22),),
        ),
        Image.asset('./assets/imgs/laying.jpg'),
        Container(
          padding: EdgeInsets.fromLTRB(0,10,0,0),
          child: Text('i am a photo',
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 22),),
        )
      ],
    );

水平列表

scorllDirect:Axis.horizontal

Widget build(BuildContext context) {
    return SizedBox(
        height: 100,
        child: ListView(
          scrollDirection: Axis.horizontal, // 水平列表  高度自适应
          padding: const EdgeInsets.all(10),
          children: <Widget>[
            Container(
              // height:120,
              width: 100, // 宽度 设置没用，  自适应
              child: Column(
                children: [
                 SizedBox(
                   height:80,
                   width: 80,
                   child:  Image.asset("./assets/imgs/laying.jpg"),
                 ),
                  Text('this is a sentence')
                ],
              ),
            ),
            Container(
              width: 100, // 宽度 设置没用，  自适应
              decoration: const BoxDecoration(color: Colors.blue),
            ),
          ],
        )
    );
  容器里面套容器，
  将  默认的 竖  改为横  horizontal

GridView

Widget buildGridView1(){
    return GridView(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      // cross  axis  每行的个数
      crossAxisCount: 2,
      // 空间
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
        // 长度比例
        childAspectRatio: 1.4
    ),
    children: [
        buildListViewItem(1),
        buildListViewItem(2),
        buildListViewItem(3),
        buildListViewItem(4),
        buildListViewItem(5),
        buildListViewItem(6),
    ],
    );
  }
  Widget buildListViewItem(int index){
    return new Container(
      height: 84,
      alignment: Alignment.center,
      color: Colors.grey[100*(index % 9)],
      child: new Text('grid item $index'),
    );
  }

Widget buildGridView() {
  return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // cross  axis  每行的个数
          crossAxisCount: 3,
          // 空间
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
          // 长度比例
          childAspectRatio: 1.4),
      children: List.generate(50, (index) {
        return Container(
          color: Color.fromARGB(255, Random().nextInt(256),
              Random().nextInt(256), Random().nextInt(256)),
        );
      }));
}

Widget buildGridView2() {
  return GridView(
    gridDelegate:
        //  给长度  最长  的 为  220   大概 值
        SliverGridDelegateWithMaxCrossAxisExtent(
            crossAxisSpacing: 8,
            mainAxisSpacing: 8,
            childAspectRatio: 1.6,
            maxCrossAxisExtent: 220),
    children: List.generate(50, (index) {
      return Container(
        color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256),
            Random().nextInt(256)),
      );
    }),
  );
}

Widget buildGridView2() {
  return GridView.builder(
    gridDelegate:
        //  给长度  最长  的 为  220   大概 值
        SliverGridDelegateWithMaxCrossAxisExtent(
            crossAxisSpacing: 8,
            mainAxisSpacing: 8,
            childAspectRatio: 1.6,
            maxCrossAxisExtent: 220),
    itemBuilder: (BuildContext context, int index) {
      return Container(
        color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256),
            Random().nextInt(256)),
      );
    },
  );
}

下拉刷新更多

return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('this is title'),
      ),
      body: RefreshIndicator(
        color: Colors.blue,
        // 下拉停止距离
        displacement: 44.0,
        backgroundColor: Colors.grey[200],
        onRefresh: ()async{
          await Future.delayed(Duration(milliseconds: 3000));
          return Future.value(true);
        },
        child: buildGridView(),
      ),
    );

page swiper

先定义一个图片组件

所给的值为自己定义的值可以传参

import 'package:flutter/material.dart';
//  单个组件 后面 方便 使用
class ImagePage extends StatelessWidget {
  final double width;
  final double height;
  final String src;
  const ImagePage({ super.key,this.width=double.infinity,this.height=200,required this.src});
  @override
  Widget build(BuildContext context) {
  //    定义 组件     设置 属性 在 组件  里面
  return SizedBox(
    width: width,
    height: height,
    child: Image.asset(src,fit:BoxFit.cover),
  // child: Text("hello,world"),
  );
  }
}

定义一个 list 存放图片

List<Widget> list = [];
  @override
  void initState() {
    super.initState();
    list = [
      ImagePage(
        width: double.infinity,
        height: 200,
        src: "imgs/1.png",
      ),
      ImagePage(
        width: double.infinity,
        height: 200,
        src: "imgs/laying.jpg",
      ),
      ImagePage(
        width: double.infinity,
        height: 200,
        src: "imgs/noodle.jpg",
      ),
    ];
  }

使用

body: SizedBox(
            height: 400,
            width: 400,
            child:PageView(
              children: list,
            )
        ),

可以无限循环

body: SizedBox(
            height: 400,
            width: 400,
            child:PageView.builder(
              itemCount: 1000,
              itemBuilder: (context,index){
                //0 % 3  = 0   1 %3 = 1   2 % 3 = 2   3  % 3 =  1
                return list[index % list.length];
              },
            )
        ),

用 stack 在图片下面加 3 个小点

Positioned(
              //  right  加  left   都 为 0  就会  占满 整行
              //  之后 便可 居中
              right: 0,
                left: 0,
                bottom: 2,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: List.generate(3, (index) {
                    return Container(
                      margin: EdgeInsets.all(5),
                      width: 10,
                      height: 10,
                      decoration: BoxDecoration(
                        color: _currentIndex==index?Colors.blue:Colors.grey,
                        // borderRadius: BorderRadius.circular(5)
                      shape: BoxShape.circle
                      ),
                    );
                  }).toList(),
                ),
            )

定义一个  变量   存储  此时的 位置
  int _currentIndex=0;
    color: _currentIndex==index?Colors.blue:Colors.grey,
      当前 的  为 蓝色

全部代码

SingleChildScrollView

body: Center(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(20),
          // 滑倒边界有回弹效果
          physics: BouncingScrollPhysics(),
          controller: _scrollController,
          child: Container(
              color: Colors.grey,
              height: 1000,
              child: Align(
                alignment: FractionalOffset.bottomCenter,
                child: Text(
                  'Hello, Flutter!',
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              )),
        ),
      ),

监听距离

void initState() {
    // TODO: implement initState
    super.initState();
    _scrollController.addListener(() {
      double offsetValue=_scrollController.offset;
      double max= _scrollController.position.maxScrollExtent;
      if(offsetValue<=0){
        print("已经在顶部啦");
      }else if(offsetValue>=max){
        print("已经到底部啦");
      }else{
        print("the offsetValue is: $offsetValue max: $max");
      }
    });
  }

滑动到指定位置高度

void scrollOffset(double offset) {
    _scrollController.animateTo(offset,
        duration: Duration(milliseconds: 200), curve: Curves.ease);
  }

void scrollToTop() {
    scrollOffset(0.0);
  }
  void scrollToBottom() {
    double maxScroll = _scrollController.position.maxScrollExtent;
    scrollOffset(maxScroll);
  }

使用

children: [
                ElevatedButton(
                  onPressed: () {
                    scrollToBottom();
                  },
                  child: Text("scrollToBottom"),
                ),
              SizedBox(height:900),
                ElevatedButton(
                  onPressed: () {
                    scrollToTop();
                  },
                  child: Text("scrollToTop"),
                ),
              ],

flutter:view (九)

前言

SliverAppBar

pageView

NestedScorllVie

CustomScrollView

ListView

简单使用

使用图片加文字

水平列表

GridView

下拉刷新更多

page swiper

SingleChildScrollView

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

flutter:view (九)

前言

SliverAppBar

pageView

NestedScorllVie

CustomScrollView

ListView

简单使用

使用图片加文字

水平列表

GridView

下拉刷新更多

page swiper

SingleChildScrollView

热门文章

最新文章

相关电子书