如何使标签栏下的内容在没有固定高度的情况下可滚动？
[英]How to make content under a tab bar scrollable without a fixed height?
问题描述
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);
}
1 个解决方案
解决方案1
0 2022-04-26 05:31:07
You just have to add a SingleChildScrollView as the main body of your Scaffold.您只需添加一个 SingleChildScrollView 作为脚手架的主体。 Like this:像这样：
...
return Scaffold(
backgroundColor: Colors.grey.shade200,
appBar: CustomAppBar(
appbarcolor: Color.fromRGBO(255, 255, 255, 0.0),
),
bottomNavigationBar: BottomNavBar(),
body: SingleChildScrollView( // This widget will make your screen scrollable
child: SafeArea(
child: Padding(
// Rest of your code
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Flutter - 如何制作具有固定高度的自定义圆形标签指示器？ - Flutter - How to make custom rounded shape tab indicator with fixed height?
如何使卡片内容可滚动？ - How to make scrollable a card content?
即使内容高度低于滚动视图高度，如何使 SingleChildScrollView 可滚动？ - How to make SingleChildScrollView scrollable even content hight is lower than the scroll view height?
如何降低 Cupertino Sliver Navigation bar 的高度，使其看起来像一个带有可滚动主体的普通 Cupertino Navigation Bar - How do you reduce the height of the Cupertino Sliver Navigation bar to make it look like an ordinary Cupertino Navigation Bar with a scrollable body
如何让ListTile固定高度？ - How to make ListTile fixed height?
如何在 flutter 中制作此标签栏 - How to make this tab bar in flutter
如何降低 flutter 中标签栏的高度 - how to reduce height of Tab Bar in flutter
具有灵活高度和可滚动内容的对话框 - Dialog with flexible height and scrollable content
如何在两个固定小部件之间制作可滚动小部件 - How to make a scrollable widget between two fixed widgets
Flutter中，没有固定高度的嵌套listview有溢出且不可滚动 - In Flutter, nested listview without fixed height has a overflow and non-scrollable
相关标签