如何在Flutter中根据屏幕大小设置PageView.builder的高度？

ttvkxqim 于 2023-04-22 发布在 Flutter

关注(0)|答案(2)|浏览(291)

我在Flutter中遇到PageView.builder的高度问题。我想根据屏幕大小设置高度。我尝试使用MediaQuery设置高度，但我仍然面临这个问题。
我尝试使用MediaQuery设置高度，如下所示：

final Size size = MediaQuery.of(context).size;
height: size.height / 2 * 1.2,

以下是我的PageView.builder的完整代码：

SizedBox(
    height: size.height / 2 * 1.2,
    child: PageView.builder(
      controller: _pageController,
      onPageChanged: (index) {
        setState(() {
          _currentIndex = index;
        });
      },
      itemCount: 3,
      physics: const PageScrollPhysics(),
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.only(top: 50, left: 0, right: 20),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: Colors.accents[index].withOpacity(0.5),
            ),
            // height: size.height / 2,
            // width: size.width / 2 * 1.5,
            child: Padding(
              padding: const EdgeInsets.all(30.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Plan ${index + 1}',
                    style: const TextStyle(
                        fontSize: 20, fontWeight: FontWeight.w500),
                  ),
                  Constants.height10,
                  const Text(
                    'Lorem ipsum dolor sit amet, consectetur itd ',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Constants.height20,
                  ListView.separated(
                    shrinkWrap: true,
                    itemCount: 10,
                    itemBuilder: (BuildContext context, int index) {
                      return Row(
                        children: const [
                          CircleAvatar(
                            radius: 3,
                            backgroundColor: Colors.black,
                          ),
                          SizedBox(width: 10),
                          Text('Lorem ipsum dolor sit '),
                        ],
                      );
                    },
                    separatorBuilder: (context, index) => Constants.height10,
                  ),
                  const Divider(thickness: 2),
                  Row(
                    children: const [
                      Text(
                        '\$199/',
                        style: TextStyle(
                          fontSize: 32,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 20),
                        child: Text(
                          'month',
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      )
                    ],
                  )
                ],
              ),
            ),
          ),
        );
      },
    ),
  );

但我仍然有问题，如两个不同大小屏幕的屏幕截图所示：

我试着给更多的空间来避免溢出，但是当涉及到更大的屏幕时，PageView.builder变得过大，使UI看起来很糟糕。我想让PageView.builder看起来像在给定的屏幕截图上的iPhone屏幕。
有人能帮我根据Flutter中的屏幕大小正确设置PageView.builder的高度吗？谢谢你的时间

flutter

来源：https://stackoverflow.com/questions/76032663/how-to-set-the-height-of-a-pageview-builder-in-flutter-based-on-screen-size

2条答案

按热度按时间

dhxwm5r41#

最好使用LayoutBuilder进行响应式设计，对于您的情况，使用Expanded小部件 Package ListView并遵循以下操作

class PWF4 extends StatefulWidget {
  const PWF4({super.key});

  @override
  State<PWF4> createState() => _PWF4State();
}

class _PWF4State extends State<PWF4> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          final size = Size(constraints.maxWidth, constraints.maxHeight);

          return Column(
            children: [
              SizedBox(
                height: size.height / 2 * 1.2,
                child: PageView.builder(
                  // controller: _pageController,
                  onPageChanged: (index) {
                    setState(() {
                      // _currentIndex = index;
                    });
                  },
                  itemCount: 3,
                  physics: const PageScrollPhysics(),
                  itemBuilder: (context, index) {
                    return Padding(
                      padding:
                          const EdgeInsets.only(top: 50, left: 0, right: 20),
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          color: Colors.accents[index].withOpacity(0.5),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(30.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                'Plan ${index + 1}',
                                style: const TextStyle(
                                    fontSize: 20, fontWeight: FontWeight.w500),
                              ),
                              // Constants.height10,
                              const Text(
                                'Lorem ipsum dolor sit amet, consectetur itd ',
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                              // Constants.height20,
                              SizedBox(height: 20),
                              Expanded(
                                child: ListView.separated(
                                  itemCount: 10,
                                  itemBuilder:
                                      (BuildContext context, int index) {
                                    return Row(
                                      children: const [
                                        CircleAvatar(
                                          radius: 3,
                                          backgroundColor: Colors.black,
                                        ),
                                        SizedBox(width: 10),
                                        Text('Lorem ipsum dolor sit '),
                                      ],
                                    );
                                  },
                                  separatorBuilder: (context, index) =>
                                      SizedBox(height: 10),
                                ),
                              ),
                              const Divider(thickness: 2),
                              Row(
                                children: const [
                                  Text(
                                    '\$199/',
                                    style: TextStyle(
                                      fontSize: 32,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(top: 20),
                                    child: Text(
                                      'month',
                                      style: TextStyle(
                                        fontSize: 20,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

关于adaptive-design

赞(0）回复(0）举报 2023-04-22

7cwmlq892#

height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,

赞(0）回复(0）举报 2023-04-22

我来回答

如何在Flutter中根据屏幕大小设置PageView.builder的高度？

2条答案

相关问题

热门标签

最新问答