如何根据屏幕尺寸设置Flutter中PageView.builder的高度？

huangapple
go评论63阅读模式
英文:

How to set the height of a PageView.builder in Flutter based on screen size?

问题

I am having an issue with the height of a PageView.builder in Flutter. I want to set the height based on the screen size. I tried using MediaQuery to set the height, but I'm still facing the issue.

I tried setting the height using MediaQuery like this:

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

Here is the full code for my 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,
                        ),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      );
    },
  ),
);

But I'm still having the problem, as shown in this screenshot of two different sized screens:

如何根据屏幕尺寸设置Flutter中PageView.builder的高度？

I tried giving more space to avoid overflow, but when it comes to bigger screens, the PageView.builder becomes oversized and makes the UI look bad. I want to make the PageView.builder look like it does on iPhone screen on the given screenshot.

Can someone help me to properly set the height of the PageView.builder based on screen size in Flutter? Thank you for your time.

英文:

I am having an issue with the height of a PageView.builder in Flutter. I want to set the height based on the screen size. I tried using MediaQuery to set the height, but I'm still facing the issue.

I tried setting the height using MediaQuery like this:

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

Here is the full code for my 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,
),
),
)
],
)
],
),
),
),
);
},
),
);

But I'm still having the problem, as shown in this screenshot of two different sized screens:

如何根据屏幕尺寸设置Flutter中PageView.builder的高度？

I tried giving more space to avoid overflow, but when it comes to bigger screens, the PageView.builder becomes oversized and makes the UI look bad. I want to make the PageView.builder look like it does on iPhone screen on the given screenshot.

Can someone help me to properly set the height of the PageView.builder based on screen size in Flutter?.
thank you for your time

答案1

得分: 1

以下是代码的中文翻译：

使用`LayoutBuilder`更好地实现响应式设计，对于你的情况，使用`Expanded`小部件包装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(
                                '计划 ${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(
                                      '月',
                                      style: TextStyle(
                                        fontSize: 20,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

更多关于自适应设计的信息


<details>
<summary>英文:</summary>
It is better to use `LayoutBuilder` for responsive design, For your case , wrap the ListView with `Expanded` widget and follow 
```dart
class PWF4 extends StatefulWidget {
const PWF4({super.key});
@override
State&lt;PWF4&gt; createState() =&gt; _PWF4State();
}
class _PWF4State extends State&lt;PWF4&gt; {
@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(
&#39;Plan ${index + 1}&#39;,
style: const TextStyle(
fontSize: 20, fontWeight: FontWeight.w500),
),
// Constants.height10,
const Text(
&#39;Lorem ipsum dolor sit amet, consectetur itd &#39;,
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(&#39;Lorem ipsum dolor sit &#39;),
],
);
},
separatorBuilder: (context, index) =&gt;
SizedBox(height: 10),
),
),
const Divider(thickness: 2),
Row(
children: const [
Text(
&#39;\$199/&#39;,
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
&#39;month&#39;,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
)
],
)
],
),
),
),
);
},
),
),
],
);
},
),
);
}
}

More about adaptive-design

答案2

得分: -1

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

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

huangapple
  • 本文由 发表于 2023年4月17日 15:31:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/76032663.html
  • dart
  • flutter
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定