Bil*_*bbi 6 flutter flutter-layout
我想在IOS上创建类似whatsapp的效果。即,当我开始向下滚动文本折叠栏时,在用户[联系人]屏幕上,将出现文本字段。当我向上滚动时,文本将位于应用栏中间,搜索文本字段将消失。我正在使用 CustomScrollview 和 slivers 来实现这种效果。title of FlexibleSpaceBar当我在使用列小部件添加文本字段时遇到一个问题。文本“折叠栏”正在向上移动到应用栏上方,我不知道添加它的另一种方法,我正在尝试下面的代码
import 'package:flutter/material.dart';
class Test extends StatefulWidget {
@override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
floating: false,
pinned: true,
expandedHeight: 200,
leading: Container(
margin: EdgeInsets.only(
left: 15,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
InkWell(
onTap: () {
},
child: Text(
'Edit',
style: TextStyle(
fontSize: 16,
),
),
),
],
),
),
actions: <Widget>[
Container(
margin: EdgeInsets.only(
right: 0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: () {
}),
],
),
),
],
flexibleSpace: FlexibleSpaceBar(
centerTitle: false,
title: Text(
' Collasping bar',
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
childCount: 40,
),
),
],
),
);
}
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1060 次 |
| 最近记录: |