如何在无固定高度的情况下滚动下滚动栏的内容？
我已经尝试了几个小时，但似乎无法理解。请有人可以为我调整代码，以便我的标签栏视图可以在没有像素溢出的情况下滚动吗？这是我的代码。真的很感激。我真的不知道如何在不给标签视图固定高度的情况下滚动数据。如果我给标签视图一个固定的高度，那么我将不像正常页面那样滚动。 我希望我所有的内容（多个容器）像普通页面一样垂直滚动。
感谢您的帮助
class BirthsPerDayPage extends StatefulWidget {
const BirthsPerDayPage({key}) : super(key: key);
@override
State<BirthsPerDayPage> createState() => _BirthsPerDayPageState();
}
class _BirthsPerDayPageState extends State<BirthsPerDayPage>
with TickerProviderStateMixin {
static final List <BirthsPerDay> birthsperdayData = [
BirthsPerDay('1960', 6034, Colors.green),
BirthsPerDay('1965', 6660, Colors.green),
BirthsPerDay('1970', 7672, Colors.green),
BirthsPerDay('1975', 8852, Colors.green),
BirthsPerDay('1980', 9971, Colors.green),
BirthsPerDay('1985', 11002, Colors.green),
BirthsPerDay('1990', 12176, Colors.green),
BirthsPerDay('1995', 13648, Colors.green),
BirthsPerDay('2000', 15366, Colors.green),
BirthsPerDay('2005', 17085, Colors.green),
BirthsPerDay('2010', 18852, Colors.green),
BirthsPerDay('2015', 20211, Colors.green),
BirthsPerDay('2020', 21689, Colors.green)
];
@override
Widget build(BuildContext context) {
TabController _tabController = TabController(length: 2, vsync: this);
List<charts.Series<BirthsPerDay, String>> series = [
charts.Series(
data: birthsperdayData,
id: 'Births Per Day',
domainFn: (BirthsPerDay pops, _) => pops.year,
measureFn: (BirthsPerDay pops, _) => pops.births,
colorFn: (BirthsPerDay pops, _) => charts.ColorUtil.fromDartColor(pops.barColor)
)
];
return Scaffold(
backgroundColor: Colors.grey.shade200,
appBar: CustomAppBar(
appbarcolor: Color.fromRGBO(255, 255, 255, 0.0),
),
bottomNavigationBar: BottomNavBar(),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 15, 20, 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Column(
children: [
Center(
child: Image.asset(
'assets/images/edostate.png',
height: 70,
),
),
SizedBox(height: 10),
Center(
child: Text('births per day',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Cairo',
height: 1.2,
letterSpacing: -1,
fontSize: 25,
fontWeight: FontWeight.bold)),
),
SizedBox(height: 10),
Container(
child: TabBar(
controller: _tabController,
isScrollable: true,
labelColor: Colors.black,
labelStyle: TextStyle(
color: Colors.black,
letterSpacing: -1,
fontSize: 16,
fontWeight: FontWeight.bold),
unselectedLabelColor: Colors.grey,
indicatorColor: Color(0xFF469C33),
tabs: [
Tab(text: 'current data'),
Tab(text: 'projected data'),
],
),
),
Container(
width: double.maxFinite,
height: 400,
child: Expanded(
child: TabBarView(
controller: _tabController,
children: [
SingleChildScrollView(
child: Column(
children: [
SizedBox(height: 10),
BarChartBox(
barchart: charts.BarChart(
series, vertical: false,
),
),
SizedBox(height: 20),
DataTableBox(
children: [
DemographicsCard(
year: '2020',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '21,689',
),
DemographicsCard(
year: '2015',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '20,211',
),
DemographicsCard(
year: '2010',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '18,852',
),
DemographicsCard(
year: '2005',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '17,085',
),
DemographicsCard(
year: '2000',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '15,366',
),
DemographicsCard(
year: '1995',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '13,648',
),
DemographicsCard(
year: '1990',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '12,176',
),
DemographicsCard(
year: '1985',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '11,002',
),
DemographicsCard(
year: '1980',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '9,971',
),
DemographicsCard(
year: '1975',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '8,852',
),
DemographicsCard(
year: '1970',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '7,672',
),
DemographicsCard(
year: '1965',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '6,660',
),
DemographicsCard(
year: '1960',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '6,034',
),
],
),
],
),
),
SingleChildScrollView(
child: Column(
children: [
Align(
alignment: Alignment.topLeft,
child: BigText(
text: 'projected births per day data',
),
),
SizedBox(height: 10),
DemographicsCard(
year: '2050',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '29,921',
),
DemographicsCard(
year: '2045',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '28,906',
),
DemographicsCard(
year: '2040',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '27,851',
),
DemographicsCard(
year: '2035',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '26,530',
),
DemographicsCard(
year: '2030',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '24,989',
),
DemographicsCard(
year: '2025',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '23,328',
),
],
),
),
],
),
),
),
],
)
],
),
],
),
),
),
);
}
}
class BirthsPerDay {
final String year;
final int births;
final Color barColor;
BirthsPerDay(this.year, this.births, this.barColor);
}
I've been trying for hours now but can't seem to get it. Please can someone adjust the code for me so my tab bar view can be scrollable without having the pixels overflow? here is my code. will really appreciate it. I really don't know how to make the data scrollable without giving the tab view a fixed height. if i give the tab view a fixed height, then i wont be able to scroll like it like is a normal page.
i want all my contents (multiple containers) to be scrollable vertically just like a normal page.
thanks for your help
class BirthsPerDayPage extends StatefulWidget {
const BirthsPerDayPage({key}) : super(key: key);
@override
State<BirthsPerDayPage> createState() => _BirthsPerDayPageState();
}
class _BirthsPerDayPageState extends State<BirthsPerDayPage>
with TickerProviderStateMixin {
static final List <BirthsPerDay> birthsperdayData = [
BirthsPerDay('1960', 6034, Colors.green),
BirthsPerDay('1965', 6660, Colors.green),
BirthsPerDay('1970', 7672, Colors.green),
BirthsPerDay('1975', 8852, Colors.green),
BirthsPerDay('1980', 9971, Colors.green),
BirthsPerDay('1985', 11002, Colors.green),
BirthsPerDay('1990', 12176, Colors.green),
BirthsPerDay('1995', 13648, Colors.green),
BirthsPerDay('2000', 15366, Colors.green),
BirthsPerDay('2005', 17085, Colors.green),
BirthsPerDay('2010', 18852, Colors.green),
BirthsPerDay('2015', 20211, Colors.green),
BirthsPerDay('2020', 21689, Colors.green)
];
@override
Widget build(BuildContext context) {
TabController _tabController = TabController(length: 2, vsync: this);
List<charts.Series<BirthsPerDay, String>> series = [
charts.Series(
data: birthsperdayData,
id: 'Births Per Day',
domainFn: (BirthsPerDay pops, _) => pops.year,
measureFn: (BirthsPerDay pops, _) => pops.births,
colorFn: (BirthsPerDay pops, _) => charts.ColorUtil.fromDartColor(pops.barColor)
)
];
return Scaffold(
backgroundColor: Colors.grey.shade200,
appBar: CustomAppBar(
appbarcolor: Color.fromRGBO(255, 255, 255, 0.0),
),
bottomNavigationBar: BottomNavBar(),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 15, 20, 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Column(
children: [
Center(
child: Image.asset(
'assets/images/edostate.png',
height: 70,
),
),
SizedBox(height: 10),
Center(
child: Text('births per day',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Cairo',
height: 1.2,
letterSpacing: -1,
fontSize: 25,
fontWeight: FontWeight.bold)),
),
SizedBox(height: 10),
Container(
child: TabBar(
controller: _tabController,
isScrollable: true,
labelColor: Colors.black,
labelStyle: TextStyle(
color: Colors.black,
letterSpacing: -1,
fontSize: 16,
fontWeight: FontWeight.bold),
unselectedLabelColor: Colors.grey,
indicatorColor: Color(0xFF469C33),
tabs: [
Tab(text: 'current data'),
Tab(text: 'projected data'),
],
),
),
Container(
width: double.maxFinite,
height: 400,
child: Expanded(
child: TabBarView(
controller: _tabController,
children: [
SingleChildScrollView(
child: Column(
children: [
SizedBox(height: 10),
BarChartBox(
barchart: charts.BarChart(
series, vertical: false,
),
),
SizedBox(height: 20),
DataTableBox(
children: [
DemographicsCard(
year: '2020',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '21,689',
),
DemographicsCard(
year: '2015',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '20,211',
),
DemographicsCard(
year: '2010',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '18,852',
),
DemographicsCard(
year: '2005',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '17,085',
),
DemographicsCard(
year: '2000',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '15,366',
),
DemographicsCard(
year: '1995',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '13,648',
),
DemographicsCard(
year: '1990',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '12,176',
),
DemographicsCard(
year: '1985',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '11,002',
),
DemographicsCard(
year: '1980',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '9,971',
),
DemographicsCard(
year: '1975',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '8,852',
),
DemographicsCard(
year: '1970',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '7,672',
),
DemographicsCard(
year: '1965',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '6,660',
),
DemographicsCard(
year: '1960',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '6,034',
),
],
),
],
),
),
SingleChildScrollView(
child: Column(
children: [
Align(
alignment: Alignment.topLeft,
child: BigText(
text: 'projected births per day data',
),
),
SizedBox(height: 10),
DemographicsCard(
year: '2050',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '29,921',
),
DemographicsCard(
year: '2045',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '28,906',
),
DemographicsCard(
year: '2040',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '27,851',
),
DemographicsCard(
year: '2035',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '26,530',
),
DemographicsCard(
year: '2030',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '24,989',
),
DemographicsCard(
year: '2025',
icon: Icon(Icons.arrow_drop_up,
color: Color(0xFF469C33)),
figure: '23,328',
),
],
),
),
],
),
),
),
],
)
],
),
],
),
),
),
);
}
}
class BirthsPerDay {
final String year;
final int births;
final Color barColor;
BirthsPerDay(this.year, this.births, this.barColor);
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您只需要添加一个单层次旋转视图作为脚手架的主体即可。像这样：
You just have to add a SingleChildScrollView as the main body of your Scaffold. Like this: