android - 带有 ExpansionTile 的颤振标签栏
问题描述
目前我正在尝试使用 TabBar 构建 ExpansionTile,我为每个 ExpansionTile 分别创建,但是当我将它与 tabbar 结合使用时,expansiontile 无法正常工作也许只是查看 gif 以便更好地理解 xD,我正在尝试用 tabbar 让它流利,也许我错过了什么?
因为代码太长了,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,
),
),
);
}
}
解决方案
我将 Tabbar 上的高度( height: MediaQuery.of(context).size.height, child: TabBarView(children: [MenuOne(), MenuTwo()]), )更改为修复高度,例如
( height: 500, child: TabBarView(children: [MenuOne(), MenuTwo()]), ),
解决我的问题的 500,如果我我正在使用MediaQuery.of(context).size.height * number
它使功能滚动不起作用另一种方法,我有类似大小的类
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)
推荐阅读
- laravel - 我不知道为什么这个错误出现在 Laravel 内部?
- r - 整个组的趋势线 - R
- typescript - 我可以指定一个接口将共享另一个接口的密钥吗?
- c# - .NET Core 2.2 在使用 Windows Auth 调用同一服务器上的 IIS 站点时收到 401 Unauthorized 响应
- postgresql - 单组,多选。需要子查询?
- android - 实时数据
- > 不是 LiveData 的子类
- >
- jquery - 如何在没有 webpack 的 es6 中导入 npm 模块?
- php - 使用 PHP 使用 XSL 上传 XML 的最佳方式
- elisp - 更新结构字段
- java - 编码的结果相同,但散列的结果不同