颤振 - 底部溢出像素数

Posted 2023-02-23

【中文标题】颤振 - 底部溢出像素数

【英文标题】：Flutter - Bottom Overflowed by number of pixels

【发布时间】：2020-09-04 05:37:13

【问题描述】：

我正在使用Expanded 小部件及其子部件Container，并使用double.infinity 提供宽度。我正在尝试将ListView 添加为Container 的子级，并且我想要ListView 从屏幕顶部到屏幕底部的高度。虽然我的屏幕顶部已经有一个名为BuildHeaderPage 的小部件。所以，我希望Container 小部件的高度从BuildHeaderPage 小部件的底部开始到屏幕底部。

下面是我的代码：

return Scaffold(
  appBar: AppBar(
    elevation: 0,
    title: Text("Dry Cough"),
    backgroundColor: bgroundHeaderColor,
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.more_vert),
        onPressed: () ,
      )
    ],
  ),
  resizeToAvoidBottomInset: false,
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      BuildHeaderPage(bgroundHeaderColor: bgroundHeaderColor),
      Padding(
        padding: new EdgeInsets.symmetric(vertical: 8, horizontal: 8),
        child: Expanded(
          child: Container(
            width: double.infinity,
            decoration: BoxDecoration(
              color: kPrimaryColor.withOpacity(0.3),
            ),
            child: ListView(
              children: <Widget>[
                ListTile(
                  onTap: () ,
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () ,
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () ,
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () ,
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () ,
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () ,
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () ,
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () ,
                  title: Text("Data"),
                ),
              ],
            ),
          ),
        ),
      )
    ],
  ),
);

这里是BuildHeaderPage 小部件：

return Container(
  decoration: BoxDecoration(
    color: bgroundHeaderColor,
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(32),
      bottomRight: Radius.circular(32),
    ),
  ),
  padding: new EdgeInsets.all(8),
  width: double.infinity,
  height: MediaQuery.of(context).size.height / 4,
  child: Stack(
    children: <Widget>[
      // buildAppBar(context),
      Padding(
        padding: const EdgeInsets.only(left: 16),
        child: Align(
          alignment: Alignment.topCenter,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: "Are you feeling sick?\n",
                      style: TextStyle(
                          height: 1.5,
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 22),
                    ),
                    TextSpan(text: "Please contact your local hospitalize.")
                  ],
                ),
              ),
              Image.asset(
                "assets/images/cough.png",
                height: 80,
                width: 80,
                fit: BoxFit.cover,
              ),
            ],
          ),
        ),
      ),
      Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Positioned(
            bottom: 0,
            child: FlatButton(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
              padding: EdgeInsets.symmetric(
                  vertical: 12,
                  horizontal: MediaQuery.of(context).size.width / 4),
              textTheme: ButtonTextTheme.primary,
              color: Colors.redAccent,
              onPressed: () ,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "Call Now",
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(
                    width: 8,
                  ),
                  Icon(Icons.call),
                ],
              ),
            ),
          ),
        ],
      ),
    ],
  ),
);

如您所见，我的代码。所以，我希望高度 Expanded 小部件及其子 Container 小部件应该从 BuildHeaderPage 开始到屏幕底部。

【问题讨论】：

使Expanded直接成为Column的子代，不要先添加Padding，以后再添加

【参考方案1】：

在您的代码中进行以下更改

首先将您的 Padding 小部件包装在 Expanded 小部件中

从Padding 小部件中删除Expanded 小部件，因为Expanded 小部件需要column 或row 作为父小部件

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  


class MyWidget extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Text("Dry Cough"),
        backgroundColor: Colors.red,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () ,
          )
        ],
      ),
      resizeToAvoidBottomInset: false,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(32),
                bottomRight: Radius.circular(32),
              ),
            ),
            padding: new EdgeInsets.all(8),
            width: double.infinity,
            height: MediaQuery.of(context).size.height / 4,
            child: Stack(
              children: <Widget>[
                // buildAppBar(context),
                Padding(
                  padding: const EdgeInsets.only(left: 16),
                  child: Align(
                    alignment: Alignment.topCenter,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        RichText(
                          text: TextSpan(
                            children: [
                              TextSpan(
                                text: "Are you feeling sick?\n",
                                style: TextStyle(
                                    height: 1.5,
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 22),
                              ),
                              TextSpan(text: "Please contact your local hospitalize.")
                            ],
                          ),
                        ),
                        Image.asset(
                          "assets/images/cough.png",
                          height: 80,
                          width: 80,
                          fit: BoxFit.cover,
                        ),
                      ],
                    ),
                  ),
                ),
                Stack(
                  alignment: Alignment.center,
                  children: <Widget>[
                    Positioned(
                      bottom: 0,
                      child: FlatButton(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                        padding: EdgeInsets.symmetric(
                            vertical: 12,
                            horizontal: MediaQuery.of(context).size.width / 4),
                        textTheme: ButtonTextTheme.primary,
                        color: Colors.redAccent,
                        onPressed: () ,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              "Call Now",
                              style: TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            SizedBox(
                              width: 8,
                            ),
                            Icon(Icons.call),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Expanded(
            child: Padding(
              padding:  EdgeInsets.symmetric(vertical: 8, horizontal: 8),
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.blueGrey.withOpacity(0.3),
                ),
                child: ListView(
                  shrinkWrap: true,
                  children: <Widget>[
                    ListTile(
                      onTap: () ,
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () ,
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () ,
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () ,
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () ,
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () ,
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () ,
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () ,
                      title: Text("Data"),
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  

输出

【参考方案2】：

很遗憾，我现在无法对其进行测试，因为我正在手机上打字，但这应该可以，您需要将 Expanded 设为 Column 的直接子代，并且您可以在 ListView 内添加填充。

替换：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    BuildHeaderPage(bgroundHeaderColor: bgroundHeaderColor),
    Padding( // wrong
      padding: new EdgeInsets.symmetric(vertical: 8, horizontal: 8),
      child: Expanded(...),
    ),
  ],
)

与

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    BuildHeaderPage(bgroundHeaderColor: bgroundHeaderColor),
    Expanded(child: ListView(...)) // right
  ],
)

【讨论】：

我尝试了你的代码，它成功了。但我想知道当我用Padding 小部件包装Expanded 小部件时，它在ListView 中没有显示任何内容。

是的，你不能在ListView上面设置padding，会再次破坏目的，你为什么不简单地在ListView本身添加padding，这样你会阻止自己添加一个小部件Padding，这样做ListView(padding: EdgeInsets.all(8))

感谢您的解释。会试试那个。