Flutter ListView不受扩展 Package 的约束

2ledvvac  于 2022-12-19  发布在  Flutter
关注(0)|答案(1)|浏览(116)

我正努力克服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,但没有效果。

aydmsdu9

aydmsdu91#

您可以将Expanded小部件移到容器顶部。

body: Column(
  children: [
    myAppBar(height: 100, title: 'Menu'),
    Expanded(
      child: Container(

此外,当您尝试创建自定义AppBar时,可以实现PreferredSizeWidget

class myAppBar extends StatelessWidget implements PreferredSizeWidget {
  .... //get height using constructor.
  @override
  Widget build(BuildContext context) {
    return Container(height:);
  }

  @override
 Size get preferredSize => Size.fromHeight(height);
}

相关问题