我正努力克服Flutter的尺寸限制。
我试着做一个自定义的scaffold,比如screen,它有一个自定义的appbar,下面有一个堆栈,最底层是一个列表视图,如果是这样的话,顶部可能还有浮动按钮。
我不知道什么是正确的解决方案,使列表视图不会抛出"垂直视口被赋予无限高度"错误。
下面是我的代码:
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:my/model.dart';
import 'package:my/widgets/menucard.dart';
import 'package:my/screens/my1.dart';
import 'package:my/screens/my2.dart';
import 'package:my/screens/my3.dart';
import 'package:my/provider.dart';
class myAppBar extends StatelessWidget {
myAppBar(
{super.key,
required double height,
required String title,
bool autoImplyBack = true})
: _height = height,
_title = title,
_autoback = autoImplyBack;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: _height,
color: Colors.pink,
child: SizedBox(
width: double.infinity,
height: _height,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: _height,
height: _height,
child: Navigator.canPop(context) && _autoback
? IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back),
)
: null,
),
Center(
child: Text(_title),
),
SizedBox(
width: _height,
height: _height,
child: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.close),
),
),
],
),
),
);
}
double _height;
String _title;
bool _autoback;
}
class myMenu extends StatelessWidget {
const myMenu({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
myAppBar(height: 100, title: 'Menu'),
Container(
color: Colors.teal,
child: Expanded(
child: //Stack(
//children: [
ListView(
children: [
MenuCard(
icondata: Icons.circle,
subMenu: 'my1',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const my1()),
);
}),
MenuCard(
icondata: Icons.circle,
subMenu: 'my2',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const my2()),
);
}),
MenuCard(
icondata: Icons.circle,
subMenu: 'my3',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const my3()),
);
}),
MenuCard(
icondata: Icons.circle,
subMenu: 'log out',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const my1()),
);
}),
],
),
//],
),
),
//),
],
),
);
}
}
我试过将listview的shrinkwrap属性设置为true,但是根据其他关于这个主题的帖子,结果很难看,而且性能也不高。
我也尝试过将列表视图 Package 为Expanded和Flexible,但没有效果。
1条答案
按热度按时间aydmsdu91#
您可以将
Expanded
小部件移到容器顶部。此外,当您尝试创建自定义AppBar时,可以实现PreferredSizeWidget