Flutter Tabbar with ExpansionTile
[英]Flutter Tabbar with ExpansionTile
問題描述
目前我正在嘗試使用 TabBar 構建 ExpansionTile，我為每個 ExpansionTile 分別創建，但是當我將它與 tabbar 結合使用時，expansiontile 無法正常工作也許只是查看 gif 以便更好地理解 xD，我正在嘗試用tabbar讓它流利，也許我錯過了什么？
因為代碼太長而且我得到Body is limited to 30000 characters; you entered 39405. Body is limited to 30000 characters; you entered 39405.所以我復制了一些代碼到 Pastebin
https://i.imgur.com/8fRGjku.gif
https://i.imgur.com/gZ5f0X3.gif
這是menuTwo的代碼
https://pastebin.com/CcL6VRPS
標簽欄
https://pastebin.com/aBiyh1RN
展開式
https://pastebin.com/GgxCZrf8
擴展二
class ExpandedTwo extends StatefulWidget {
const ExpandedTwo({Key? key}) : super(key: key);
@override
_ExpandedTwoState createState() => _ExpandedTwoState();
}
class _ExpandedTwoState extends State<ExpandedTwo> {
@override
Widget build(BuildContext context) {
var _sizeScreen = Screen(MediaQuery.of(context).size);
var _sizeHeight = MediaQuery.of(context).size.height;
return Material(
child: Theme(
data: Theme.of(context).copyWith(accentColor: Colors.black),
child: ExpansionTile(
collapsedBackgroundColor: Colors.transparent,
backgroundColor: Colors.transparent,
title: Text(
'Expanded Two',
style: GoogleFonts.rubik(fontWeight: FontWeight.w500, fontSize: 14),
),
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Color(0xFEFFFFFF), width: 3),
),
child: Center(
child: Icon(Icons.unsubscribe_sharp)),
),
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: _sizeScreen.sizeWidth(15)),
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.fromLTRB(_sizeHeight / 65,
_sizeScreen.hp(2), 0, _sizeHeight / 97),
child: Text(
'Informasi',
style: GoogleFonts.nunitoSans(
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w700,
fontSize: 16),
),
),
Divider(
thickness: 2,
color: Color(0xFEF6F6F6),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(top: _sizeScreen.sizeHeight(3)),
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Text('Header',style: GoogleFonts.nunitoSans(
fontSize: 14,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal,
color: Colors.black
),),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('Data',),
),
SizedBox(
height: _sizeScreen.sizeHeight(2),
),
Container(
child: Text('Empty'),
),
],
),
),
SizedBox(
height: _sizeScreen.sizeHeight(5),
),
Padding(
padding: EdgeInsets.fromLTRB(0,
_sizeScreen.sizeHeight(0),0,
_sizeScreen.sizeHeight(16)),
child: ElevatedButton(
onPressed: () {
print("Button");
},
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40))),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(0.0))),
child: Ink(
decoration: const BoxDecoration(
color: Color(0xFEFFDD00),
borderRadius: BorderRadius.all(Radius.circular(40)),
),
child: Container(
constraints: const BoxConstraints(
minWidth: 100.0, minHeight: 40.0),
// min sizes for Material buttons
alignment: Alignment.center,
child: Text("Complete the Data",
style: GoogleFonts.nunitoSans(
fontSize: 16,
color: Colors.black,
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal)),
),
),
),
),
],
),
),
],
initiallyExpanded: false,
),
),
);
}
}
擴展三
class ExpandedThree extends StatefulWidget {
const ExpandedThree({Key? key}) : super(key: key);
@override
_ExpandedThreeState createState() => _ExpandedThreeState();
}
class _ExpandedThreeState extends State<ExpandedThree> {
@override
Widget build(BuildContext context) {
var _sizeScreen = Screen(MediaQuery.of(context).size);
var _sizeHeight = MediaQuery.of(context).size.height;
return Material(
child: Theme(
data: Theme.of(context).copyWith(accentColor: Colors.black),
child: ExpansionTile(
collapsedBackgroundColor: Colors.transparent,
backgroundColor: Colors.transparent,
title: Text(
'Expanded Three',
style: GoogleFonts.rubik(fontWeight: FontWeight.w500, fontSize: 14),
),
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Color(0xFEFFFFFF), width: 3),
),
child: Center(
child: Icon(Icons.home)),
),
children: [
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(children: [
Container(
color: Colors.white,
child: Column(
children: [
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.fromLTRB(_sizeHeight / 65,
_sizeScreen.hp(2), 0, _sizeHeight / 97),
child: Text(
'Source Information 1',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500, fontSize: 16),
),
),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Type Source',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Source Information',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Note',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.fromLTRB(_sizeHeight / 65,
_sizeScreen.hp(2), 0, _sizeHeight / 97),
child: Text(
'Source Information 2',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500, fontSize: 16),
),
),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Source Type',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Source Information Name',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
Container(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12),
_sizeScreen.sizeWidth(12)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Note',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w400, fontSize: 11),
),
Spacer(),
Text(
'Not Yet Filled',
style: GoogleFonts.rubik(
fontWeight: FontWeight.w500,
fontSize: 11,
fontStyle: FontStyle.normal),
)
],
)),
SizedBox(
height: _sizeScreen.sizeHeight(24),
),
Padding(
padding: EdgeInsets.fromLTRB(
_sizeScreen.sizeWidth(16),
_sizeScreen.sizeHeight(0),
_sizeScreen.sizeWidth(16),
_sizeScreen.sizeHeight(16)),
child: ElevatedButton(
onPressed: () {
print("Complete the Data");
},
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8))),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(0.0))),
child: Ink(
decoration: const BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.all(Radius.circular(8)),
),
child: Container(
constraints: const BoxConstraints(
minWidth: 100.0, minHeight: 50.0),
// min sizes for Material buttons
alignment: Alignment.center,
child: Text("Complete the Data",
style: GoogleFonts.rubik(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal)),
),
),
),
),
],
),
),
],),
)
],
initiallyExpanded: false,
),
),
);
}
}
1 個解決方案
解決方案1
0 已采納 2021-06-11 03:03:41
我將 Tabbar 上的高度 ( height: MediaQuery.of(context).size.height, child: TabBarView(children: [MenuOne(), MenuTwo()]), 更改為固定高度，例如 500 ( height: 500, child: TabBarView(children: [MenuOne(), MenuTwo()]), ),這解決了我的問題，如果我使用MediaQuery.of(context).size.height * number替代方法，我有 class 的尺寸
class Screen {
late Size screenSize;
Screen(this.screenSize);
double sizeHeight(height) {
double resultCalculation = screenSize.width / height;
return screenSize.height / resultCalculation;
}
double sizeWidth(width) {
double resultCalculation = screenSize.width / width;
return screenSize.width / resultCalculation;
}
double wp(percentage) {
return percentage / 100 * screenSize.width;
}
double hp(percentage) {
return percentage / 100 * screenSize.height;
}
double getWidthPx(int pixels) {
return (pixels / 3.61) / 100 * screenSize.width;
}
static bool isScreenLarge(double width, double pixel) {
return width * pixel >= 1440;
}
static bool isScreenMedium(double width, double pixel) {
return width * pixel < 1440 && width * pixel >= 1080;
}
static bool isScreenSmall(double width, double pixel) {
return width * pixel <= 720;
}
}
我只需要為高度調用它var _sizeScreen = Screen(MediaQuery.of(context).size); 並做height: _sizeScreen.hp(70)
是否可以用 Flutter 中的圖像填充 ExpansionTile 標題？
[英]Is it possible to fill ExpansionTile title with image in Flutter?
Flutter - 可重排序列表，Listview 嵌套在 expandtile 內
[英]Flutter - Reorderable List with a Listview nested inside expansiontile
Flutter ListView 內的 ExpansionTile 內的項目不可滾動
[英]Flutter Items inside ExpansionTile inside ListView are not scrollable
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
減少顫動中的擴展平鋪高度
錯誤 ExpansionTile 不工作或堆棧（Flutter）
是否可以用 Flutter 中的圖像填充 ExpansionTile 標題？
Flutter - 可重排序列表，Listview 嵌套在 expandtile 內
Flutter ListView 內的 ExpansionTile 內的項目不可滾動
如何在flutter中實現GooglePlay TabBar？
ModalBottomSheet 中的 tabBar 具有動態大小 Flutter
如何在 flutter 中將抽屜鏈接到 tabBar
flutter中的弧形Tabbar指示器裝飾
無法在顫動中保存 TabBar 選項卡位置的狀態
相關標簽