如何正确使用单子滚动视图
how to use single child scroll view properly
我在我的主页上使用了我正在实施的单一子滚动视图。但似乎它不起作用。我的页面没有滚动。有没有其他方法可以使用 Single child scroll view 还是我使用不正确？下面我提到了我的代码供您参考。感谢您对此的帮助。下面是错误。
RenderBox was not laid out: RenderRepaintBoundary#6f4d1
relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart': Failed assertion: line 1982
pos 12: 'hasSize'
import 'package:flutter/material.dart';
import '../constants/colors.dart';
import '../widgets/bottomNavigation.dart';
class DashboardScreen extends StatefulWidget {
const DashboardScreen({Key? key}) : super(key: key);
@override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
Padding(
padding: const EdgeInsets.only(right: 15),
child: Container(
width: 30,
child: Image.asset(
'assets/images/user.png',
),
),
),
],
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: IconThemeData(color: Colors.black),
),
drawer: Drawer(),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 20, left: 20),
child: Text(
"Hi, NEO",
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
SizedBox(
height: 30,
),
// color boxes
//box one
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: EdgeInsets.all(8.0),
height: 115,
width: 115,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.lightBlue,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'0',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white24,
),
child: Icon(
Icons.message,
color: Colors.white,
size: 18,
),
),
],
),
SizedBox(
height: 10,
),
// leads
Text(
'Total Leads',
style: TextStyle(
color: Colors.white,
),
),
],
),
),
//box two
Container(
padding: EdgeInsets.all(8.0),
height: 115,
width: 115,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.deepPurple,
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'0',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white24,
),
child: Icon(
Icons.notifications_active,
color: Colors.white,
size: 18,
),
),
],
),
SizedBox(
height: 10,
),
// leads
Text(
'Unread Messages',
style: TextStyle(
color: Colors.white,
fontSize: 13,
),
),
],
),
),
//box three
Container(
padding: EdgeInsets.all(8.0),
height: 115,
width: 115,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.teal,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'0',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white24,
),
child: Icon(
Icons.star,
color: Colors.white,
size: 18,
),
),
],
),
SizedBox(
height: 10,
),
// leads
Text(
'Unresponded Reviews',
style: TextStyle(
color: Colors.white,
fontSize: 13,
),
),
],
),
),
],
),
// SizedBox(
// height: 30,
// ),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 30, left: 20),
child: Text(
"Your Leads",
style: TextStyle(
fontSize: 20,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
],
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(10.0),
height: 75,
width: 350,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.black26,
),
child: Icon(
Icons.message,
color: Colors.white,
size: 18,
),
),
Column(
children: [
Text(
'Leads Received',
style: TextStyle(
fontSize: 13,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
),
Text(
'0',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
Container(
width: 100,
height: 5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.black26,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
),
],
),
],
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(10.0),
height: 75,
width: 350,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Color(0xff42E299),
),
child: Icon(
Icons.done,
color: Colors.white,
size: 18,
),
),
Column(
children: [
Text(
'Accepted Leads',
style: TextStyle(
fontSize: 13,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
),
Text(
'0',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
Container(
width: 100,
height: 5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Color(0xff42E299),
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
),
],
),
],
),
),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(10.0),
height: 75,
width: 350,
decoration: BoxDecoration(
color: Color(0xff42E299),
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.black26,
),
child: Icon(
Icons.handyman_outlined,
color: Colors.white,
size: 25,
),
),
SizedBox(
width: 30,
),
Column(
children: [
Text(
'Keep it up!',
style: TextStyle(
fontSize: 16,
color: Colors.white,
// fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
),
Text(
'You have completed 1 job',
style: TextStyle(
color: Colors.white,
fontSize: 13,
// fontWeight: FontWeight.bold,
),
),
],
),
],
),
],
),
),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 80,
width: 350,
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
)
],
),
Expanded(child: BottomNavigation()),
],
),
),
);
}
}
//底部导航栏
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class BottomNavigation extends StatefulWidget {
const BottomNavigation({Key? key}) : super(key: key);
@override
State<BottomNavigation> createState() => _BottomNavigationState();
}
class _BottomNavigationState extends State<BottomNavigation> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.star),
label: 'Reviews',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
onTap: _onItemTapped,
),
],
),
);
}
}
我认为删除 singleChildScrollView 并将 Column 转换为 listView 小部件可能会解决您的问题。 （它是一个很长的widget树。所以这里只插入需要的部分）
更新：错误是因为底部的扩展小部件。当您用 singleChildScrollView 小部件包裹一列时，该列会变成 listview，这意味着它可以具有无限高度。当您用展开的小部件包装小部件时，该小部件将尝试将剩余的高度 space 分配给它的子小部件。在这种情况下，这是不可能的，因为环绕 singleChildScrollView 的列的高度不受限制。所以删除那个小部件或给它一个特定的高度。
see the gif file
body: Column(
children: [
Expanded(
child: ListView(
children: const [
Padding(
padding: EdgeInsets.only(top: 20, left: 20),
child: Text(
"Hi, NEO",
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
.
.
.
.
.
//put your other widgets here.
.
.
.
.
],
),
),
const SizedBox(
height: 60,
child: BottomNavigation(),
),
],
),
你必须给 SingleChildScrollView 一个高度和宽度。这可以通过使用具有指定高度和宽度的 Container 包裹滚动视图来实现。如果要拉伸宽度，
Container(
width : MediaQuery.of(context).size.width
height : 50 ///or any value
child : SingleChildScrollView()
)
我在我的主页上使用了我正在实施的单一子滚动视图。但似乎它不起作用。我的页面没有滚动。有没有其他方法可以使用 Single child scroll view 还是我使用不正确？下面我提到了我的代码供您参考。感谢您对此的帮助。下面是错误。
RenderBox was not laid out: RenderRepaintBoundary#6f4d1 relayoutBoundary=up1 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 1982 pos 12: 'hasSize'
import 'package:flutter/material.dart';
import '../constants/colors.dart';
import '../widgets/bottomNavigation.dart';
class DashboardScreen extends StatefulWidget {
const DashboardScreen({Key? key}) : super(key: key);
@override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
Padding(
padding: const EdgeInsets.only(right: 15),
child: Container(
width: 30,
child: Image.asset(
'assets/images/user.png',
),
),
),
],
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: IconThemeData(color: Colors.black),
),
drawer: Drawer(),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 20, left: 20),
child: Text(
"Hi, NEO",
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
SizedBox(
height: 30,
),
// color boxes
//box one
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: EdgeInsets.all(8.0),
height: 115,
width: 115,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.lightBlue,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'0',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white24,
),
child: Icon(
Icons.message,
color: Colors.white,
size: 18,
),
),
],
),
SizedBox(
height: 10,
),
// leads
Text(
'Total Leads',
style: TextStyle(
color: Colors.white,
),
),
],
),
),
//box two
Container(
padding: EdgeInsets.all(8.0),
height: 115,
width: 115,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.deepPurple,
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'0',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white24,
),
child: Icon(
Icons.notifications_active,
color: Colors.white,
size: 18,
),
),
],
),
SizedBox(
height: 10,
),
// leads
Text(
'Unread Messages',
style: TextStyle(
color: Colors.white,
fontSize: 13,
),
),
],
),
),
//box three
Container(
padding: EdgeInsets.all(8.0),
height: 115,
width: 115,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.teal,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'0',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white24,
),
child: Icon(
Icons.star,
color: Colors.white,
size: 18,
),
),
],
),
SizedBox(
height: 10,
),
// leads
Text(
'Unresponded Reviews',
style: TextStyle(
color: Colors.white,
fontSize: 13,
),
),
],
),
),
],
),
// SizedBox(
// height: 30,
// ),
Row(
children: [
Padding(
padding: const EdgeInsets.only(top: 30, left: 20),
child: Text(
"Your Leads",
style: TextStyle(
fontSize: 20,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
],
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(10.0),
height: 75,
width: 350,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.black26,
),
child: Icon(
Icons.message,
color: Colors.white,
size: 18,
),
),
Column(
children: [
Text(
'Leads Received',
style: TextStyle(
fontSize: 13,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
),
Text(
'0',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
Container(
width: 100,
height: 5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.black26,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
),
],
),
],
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(10.0),
height: 75,
width: 350,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Color(0xff42E299),
),
child: Icon(
Icons.done,
color: Colors.white,
size: 18,
),
),
Column(
children: [
Text(
'Accepted Leads',
style: TextStyle(
fontSize: 13,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
),
Text(
'0',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
Container(
width: 100,
height: 5,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Color(0xff42E299),
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
),
],
),
],
),
),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(10.0),
height: 75,
width: 350,
decoration: BoxDecoration(
color: Color(0xff42E299),
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.black26,
),
child: Icon(
Icons.handyman_outlined,
color: Colors.white,
size: 25,
),
),
SizedBox(
width: 30,
),
Column(
children: [
Text(
'Keep it up!',
style: TextStyle(
fontSize: 16,
color: Colors.white,
// fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
),
Text(
'You have completed 1 job',
style: TextStyle(
color: Colors.white,
fontSize: 13,
// fontWeight: FontWeight.bold,
),
),
],
),
],
),
],
),
),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 80,
width: 350,
decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.3),
),
],
),
)
],
),
Expanded(child: BottomNavigation()),
],
),
),
);
}
}
//底部导航栏
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class BottomNavigation extends StatefulWidget {
const BottomNavigation({Key? key}) : super(key: key);
@override
State<BottomNavigation> createState() => _BottomNavigationState();
}
class _BottomNavigationState extends State<BottomNavigation> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.star),
label: 'Reviews',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
onTap: _onItemTapped,
),
],
),
);
}
}
我认为删除 singleChildScrollView 并将 Column 转换为 listView 小部件可能会解决您的问题。 （它是一个很长的widget树。所以这里只插入需要的部分）
更新：错误是因为底部的扩展小部件。当您用 singleChildScrollView 小部件包裹一列时，该列会变成 listview，这意味着它可以具有无限高度。当您用展开的小部件包装小部件时，该小部件将尝试将剩余的高度 space 分配给它的子小部件。在这种情况下，这是不可能的，因为环绕 singleChildScrollView 的列的高度不受限制。所以删除那个小部件或给它一个特定的高度。
see the gif file
body: Column(
children: [
Expanded(
child: ListView(
children: const [
Padding(
padding: EdgeInsets.only(top: 20, left: 20),
child: Text(
"Hi, NEO",
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold,
//fontFamily: "Dubai"
),
),
),
.
.
.
.
.
//put your other widgets here.
.
.
.
.
],
),
),
const SizedBox(
height: 60,
child: BottomNavigation(),
),
],
),
你必须给 SingleChildScrollView 一个高度和宽度。这可以通过使用具有指定高度和宽度的 Container 包裹滚动视图来实现。如果要拉伸宽度，
Container(
width : MediaQuery.of(context).size.width
height : 50 ///or any value
child : SingleChildScrollView()
)