Flutter DraggableScrollableSheet 可滚动对象的容器
2023-09-14 08:58:44 时间
Example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Image.network(
"https://i.loli.net/2019/11/30/auRxklc9f6TLgdE.jpg"),
),
DraggableScrollableSheet(
initialChildSize:
1.0, // 设置父容器的高度 1 ~ 0, initialChildSize必须 <= maxChildSize
minChildSize:
0.6, // 限制child最小高度, minChildSize必须 <= initialChildSize
maxChildSize: 1.0, // 限制child最大高度,
builder: (context, scrollController) {
return Container(
color: Colors.blue[100],
child: SingleChildScrollView(
controller: scrollController,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network(
"https://i.loli.net/2019/11/30/DVJGdj3eNpakXY4.jpg",
fit: BoxFit.cover,
),
),
for (var i = 0; i < 25; i++)
ListTile(title: Text('Item $i'))
],
),
),
);
},
),
],
),
);
}
}
相关文章
- flutter 使用Android studio编辑kt插件
- [Flutter + Firebase] Enable Firebase for Flutter
- [Flutter] lib/main.dart:1: Warning: Interpreting this as package URI, 'package:flutter_app/main.dart'.
- Flutter进阶第5篇: 使用WebView组件flutter_inappbrowser加载远程web页面渲染新闻详情数据
- Flutter拓展 将Flutter或Dart的JSON数据自动生成模型类
- Flutter进阶第4篇: 实现简单的新闻系统渲染新闻详情数据以及用flutter_html解析html
- flutter 小说控件
- flutter 如何去掉listview顶部空白的问题
- Flutter 监听物理返回键
- flutter dio网络请求和listview显示
- flutter的dio网络请求,成功与失败的操作
- Flutter之GlobalKey详解
- Flutter之Redux框架入门
- Flutter 开发环境搭建Unable to ‘pub upgrade‘ flutter tool. Retrying in five seconds...
- Flutter之路由系列之Route
- Flutter 中的表单