Flutter - SingleChildScrollView

最新推荐文章于 2024-04-26 16:48:40 发布

a136447572

最新推荐文章于 2024-04-26 16:48:40 发布

阅读量889

点赞数

分类专栏： Flutter 文章标签： flutter android

本文链接：https://blog.csdn.net/a136447572/article/details/128303849

版权

Flutter 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

SingleChildScrollView类似于Android中的ScrollView，它只能接收一个子组件

const SingleChildScrollView({
    super.key,
    this.scrollDirection = Axis.vertical,  // 方向
    this.reverse = false,  // 是否反向滑动
    this.padding,  
    this.primary, // 与 controller 字段有关, 是否自动生成controller的判断处
    this.physics,
    this.controller,
    this.child,
    this.dragStartBehavior = DragStartBehavior.start,
    this.clipBehavior = Clip.hardEdge,
    this.restorationId,
    this.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  }) :

Scrollbar  用于包裹 SingleChildScrollView 显示滚动条

在这里插入图片描述

知识点 
1 Scrollbar
2 SingleChildScrollView
3 .map((e)
4 Container,BoxDecoration,BorderRadius,boxShadow,Alignment,BoxConstraints,Text 知识点回顾


class SingleChildScrollViewTestState extends StatelessWidget {
  const SingleChildScrollViewTestState({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    String zimu = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    return Scrollbar(
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
            children: zimu
                .split("")
                .map((e) =>
                Container(
                  margin: EdgeInsets.all(5),
                  decoration: BoxDecoration(
                    color: Colors.red[200],
                    borderRadius: BorderRadius.circular(8),
                    boxShadow: const [
                      BoxShadow(
                        color: Colors.black26,
                        offset: Offset(1,1),
                        blurRadius: 3,
                      )
                    ]
                        
                  ),
                  alignment: Alignment.center,
                  
                  constraints: BoxConstraints.tightFor(width: double.infinity,height: 80),
                  child: Text(
                    e,
                    textScaleFactor: 2,
                    style: const TextStyle(
                      color: Colors.white
                    ),
                  ),
                )
            ).toList()),
        )
    );
  }
}