我有一个问题，我的计划是否可行。当我向下滚动页面时，红框容器不应该消失，而是留在红框的位置。我现在不知道该怎么做。这是代码的相关部分。
提前感谢您的任何想法。 R.十一
Screenshot where the container should be
这里是代码
body: SingleChildScrollView(
child: Container(
// Main Container
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.jpg"),
fit: BoxFit.cover,
),
),
child: Column(
children: <Widget>[
Container(
// Bild Container
height: 300,
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Container(
decoration: BoxDecoration(
boxShadow: [
//background color of box
BoxShadow(
color: Color.fromRGBO(
33,
33,
33,
1,
),
blurRadius: 4, // soften the shadow
spreadRadius: 2, //extend the shadow
offset: Offset(
0.0, // Move to right 10 horizontally
0.0, // Move to bottom 10 Vertically
),
)
],
image: DecorationImage(
fit: BoxFit.cover,
image:
CachedNetworkImageProvider(data['imgUrl'])),
color: Color.fromRGBO(255, 255, 255, 100),
),
),
),
), // Bild
Container(
height: 60,
width: MediaQuery.of(context).size.width,
// Titel Container
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Container(
decoration: BoxDecoration(
boxShadow: [
//background color of box
BoxShadow(
color: Color.fromRGBO(
33,
33,
33,
1,
),
blurRadius: 4, // soften the shadow
spreadRadius: 2, //extend the shadow
offset: Offset(
0.0, // Move to right 10 horizontally
0.0, // Move to bottom 10 Vertically
),
)
],
color: Color.fromRGBO(255, 255, 255, 1),
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Text(data['title'],
style: Theme.of(context).textTheme.headline),
)),
),
), // Titel
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
// Left
flex: 4,
child: Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
decoration: BoxDecoration(
boxShadow: [
//background color of box
BoxShadow(
color: Color.fromRGBO(
33,
33,
33,
1,
),
blurRadius: 4, // soften the shadow
spreadRadius: 2, //extend the shadow
offset: Offset(
0.0, // Move to right 10 horizontally
0.0, // Move to bottom 10 Vertically
),
)
],
color: Color.fromRGBO(255, 255, 255, 1),
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
Text("Portionen: ",
style: Theme.of(context)
.textTheme
.body1),
Text(data['portions'],
style: Theme.of(context)
.textTheme
.body1),
],
),
Text("Zutaten",
style: Theme.of(context)
.textTheme
.title),
Text(data['ingredients'],
style: Theme.of(context)
.textTheme
.body1),
],
),
),
),
),
),
Expanded(
// Right
flex: 6,
child: Padding(
padding:
const EdgeInsets.only(top: 10.0, left: 10),
child: Container(
decoration: BoxDecoration(
boxShadow: [
//background color of box
BoxShadow(
color: Color.fromRGBO(
33,
33,
33,
1,
),
blurRadius: 4, // soften the shadow
spreadRadius: 2, //extend the shadow
offset: Offset(
0.0, // Move to right 10 horizontally
0.0, // Move to bottom 10 Vertically
),
)
],
color: Color.fromRGBO(255, 255, 255, 1),
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Zubereitung",
style: Theme.of(context)
.textTheme
.body1),
ItemsList(myid: widget.value),
],
),
),
),
),
),
],
),
),
],
),
),
),
答案 0 :(得分：0)
我认为您正在寻找的是粘性侧标题，试试这个 flutter_sticky_header 示例：
import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
import '../common.dart';
class SideHeaderExample extends StatelessWidget {
const SideHeaderExample({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return AppScaffold(
title: 'Side Header Example',
slivers: [
_StickyHeaderGrid(index: 0),
_StickyHeaderGrid(index: 1),
_StickyHeaderGrid(index: 2),
_StickyHeaderGrid(index: 3),
],
);
}
}
class _StickyHeaderGrid extends StatelessWidget {
const _StickyHeaderGrid({
Key key,
this.index,
}) : super(key: key);
final int index;
@override
Widget build(BuildContext context) {
return SliverStickyHeader(
overlapsContent: true,
header: _SideHeader(index: index),
sliver: SliverPadding(
padding: const EdgeInsets.only(left: 60),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, crossAxisSpacing: 4.0, mainAxisSpacing: 4.0),
delegate: SliverChildBuilderDelegate(
(context, i) => GridTile(
child: Card(
child: Container(
color: Colors.green,
),
),
footer: Container(
color: Colors.white.withOpacity(0.5),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Grid tile #$i',
style: const TextStyle(color: Colors.black),
),
),
),
),
childCount: 9,
),
),
),
);
}
}
class _SideHeader extends StatelessWidget {
const _SideHeader({
Key key,
this.index,
}) : super(key: key);
final int index;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
child: Align(
alignment: Alignment.centerLeft,
child: SizedBox(
height: 44.0,
width: 44.0,
child: CircleAvatar(
backgroundColor: Colors.orangeAccent,
foregroundColor: Colors.white,
child: Text('$index'),
),
),
),
);
}
}