所以，我有一个高度为屏幕高度的容器，singlechildscrollview 作为它的孩子。
代码：-
Stack(
children: [
Container(
alignment: Alignment.center,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/coverPhoto.jpg'),
fit: BoxFit.cover,
colorFilter: new ColorFilter.mode(Colors.black.withOpacity(opacity), BlendMode.srcATop),
)
),
child: NestedScrollView(
controller: controller,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: MediaQuery.of(context).size.height*2/3,
floating: false,
elevation: 0.0,
backgroundColor: Colors.transparent,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Some text",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
SizedBox(height: 25,),
Text(
"Some heading",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
),
),
),
),
];
},
body: Center(
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(height: MediaQuery.of(context).size.height*3/4,),
Container(
width: MediaQuery.of(context).size.width*7/10,
color: const Color(0xff262626),
padding: EdgeInsets.symmetric(vertical: 40,horizontal: 100),
child: Column(
children: [
Text(
"Heading",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: 80,),
Text(
"a content of 3-4 lines",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.white,
),
)
],
),
),
SizedBox(height: MediaQuery.of(context).size.height/4,),
abcWidget(),
],
),
),
),
),
),
],
)
abcWidget() 的代码：-
class abcWidget extends StatefulWidget {
const abcWidget({Key key}) : super(key: key);
@override
_abcWidgetState createState() => _abcWidgetState();
}
class _abcWidgetState extends State<abcWidget> with SingleTickerProviderStateMixin{
TabController _tabController;
@override
void initState() {
_tabController = new TabController(length: 4, vsync: this);
super.initState();
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
Container serviceTile({String serviceName, String content, String fileName,double width})
{
return Container(
color: const Color(0xff171717),
padding: EdgeInsets.fromLTRB(5, 20, 5, 10),
child: Column(
children: [
Image.asset('assets/services/$fileName.png',height: width/3.5,),
Text(
serviceName,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 10,),
Text(
content,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.w400,
),
),
],
),
);
}
@override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height, // if i remove this height
padding: EdgeInsets.symmetric(horizontal: 200),
width: double.infinity,
color: const Color(0xff000000),
child: Column(
children: [
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: const Color(0xff0974b3),
width: 2.0,
),
),
),
child: Text(
"OUR SERVICES",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
SizedBox(height: 30,),
Text(
"We design & build brands,campaigns & digital projects for businesses large & small.",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w400,
fontSize: 16.0,
),
),
Text(
"Outstanding Service is Our Duty.",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w400,
fontSize: 16.0,
),
),
SizedBox(
height: 50,
width: MediaQuery.of(context).size.width*1.1/3,
child: TabBar(
controller: _tabController,
unselectedLabelColor: Colors.grey,
indicatorColor: Colors.white,
labelColor: Colors.white,
tabs: [
Tab(text: "Show All",),
Tab(text: "Design",),
Tab(text: "Marketing",),
Tab(text: "Development",),
],
),
),
SizedBox(height: 15,),
Expanded(
child: TabBarView(
physics: NeverScrollableScrollPhysics(),
controller: _tabController,
children: List.generate(4, (index) => GridView.count(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 3,
mainAxisSpacing: 15.0,
crossAxisSpacing: 15.0,
children: [
serviceTile(
serviceName: "Web Development",
content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
fileName: "web development",
width: MediaQuery.of(context).size.width/4,
),
serviceTile(
serviceName: "Web Development",
content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
fileName: "web development",
width: MediaQuery.of(context).size.width/4,
),
serviceTile(
serviceName: "Web Development",
content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
fileName: "web development",
width: MediaQuery.of(context).size.width/4,
),
serviceTile(
serviceName: "Web Development",
content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
fileName: "web development",
width: MediaQuery.of(context).size.width/4,
),
serviceTile(
serviceName: "Web Development",
content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
fileName: "web development",
width: MediaQuery.of(context).size.width/4,
),
serviceTile(
serviceName: "Web Development",
content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
fileName: "web development",
width: MediaQuery.of(context).size.width/4,
),
serviceTile(
serviceName: "Web Development",
content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
fileName: "web development",
width: MediaQuery.of(context).size.width/4,
),
serviceTile(
serviceName: "Web Development",
content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
fileName: "web development",
width: MediaQuery.of(context).size.width/4,
),
serviceTile(
serviceName: "Web Development",
content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
fileName: "web development",
width: MediaQuery.of(context).size.width/4,
),
serviceTile(
serviceName: "Web Development",
content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
fileName: "web development",
width: MediaQuery.of(context).size.width/4,
),
serviceTile(
serviceName: "Web Development",
content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
fileName: "web development",
width: MediaQuery.of(context).size.width/4,
),
serviceTile(
serviceName: "Web Development",
content: "Web development is the building and maintenance of websites; it’s the work that happens behind the scenes to make a website look great, work fast and perform well with a seamless user experience.",
fileName: "web development",
width: MediaQuery.of(context).size.width/4,
),
],
),),
),
),
],
),
);
}
}
如果我按照代码中的注释从容器中删除上述小部件的高度，则会出现以下错误：-
错误：-
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
如果我不这样做，那么我就不会在这个小部件中滚动。
因为你不能使用
ExpandedColumnScrollview使用 SizedBox 来解决你的问题，滚动区域将随着列的高度而增长。
SingleChildScrollView(
child: SizedBox(
width: double.infinity,
child: Column(
children: [Text('Text1'), Text('Text2')],
),
),
);