移除 space 周围的图像抖动

Question

你好，我正在制作一个应用程序，其中我有一个带有发送按钮的相机图像。图片周围有很多 space，如果图片的高度小于发送按钮，则发送按钮不再位于底部。我需要图像垂直居中和最大宽度。消息容器应该在底部。感谢您的帮助。

这是我的应用程序的代码：

return Scaffold( 
resizeToAvoidBottomInset: false, 
body: Stack( 
alignment: Alignment.bottomCenter,
 children: [ 
Image.file(widget.image,), 
Container( 
child: Row( 
children: [ 
Expanded( 
child: Container( 
margin: EdgeInsets.all(3), 
height: 50, 
child: TextField( 
controller: _writeMessageTextEditingController, 
style: TextStyle(
color: Colors.white), 
decoration: InputDecoration( 
contentPadding: EdgeInsets.only(left: 15, top: 15,), 
border: OutlineInputBorder( 
borderRadius: BorderRadius.circular(300), 
borderSide: BorderSide( 
width: 0, 
style: 
BorderStyle.none, 
), 
), 
focusedBorder: OutlineInputBorder( 
borderRadius: BorderRadius.circular(300), 
borderSide: BorderSide( 
width: 0, 
style: BorderStyle.none, 
), 
), 
filled: true, 
hintStyle: TextStyle( color: Colors.grey, ), 
hintText: "Message", 
fillColor: Colors.grey[800], 
), 
), 
), 
), 
Container( 
margin: EdgeInsets.all(3), 
height: 50, 
width: 50, 
decoration: BoxDecoration( 
borderRadius: BorderRadius.circular(100), 
color: Color(0xff0077b6), 
), 
padding: EdgeInsets.all(8), 
child: GestureDetector( 
child: Icon(
Icons.send, 
color: Colors.white,
), 
onTap: (){ 
String message = _writeMessageTextEditingController.text.toString(); 
File file = widget.image; 
print(file); 
print(message); 
_writeMessageTextEditingController.clear(); 
Navigator.pop(context); 
//send message to server 
}, 
), 
), 
], 
), 
), 
], 
), 
);

Answer 1

因此，首先，可能有无数种方法可以实现这一目标。我选择使用 Columns 及其属性来对齐两个堆叠的项目。

聊天栏和发送按钮

让我们从聊天栏和发送按钮开始。它基本上归结为：

Column(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.end,
  children: [RowWithTextBarAndSendButton(...)],
),

这可确保您的聊天栏与屏幕底部整齐对齐。此外，我删除了堆栈中的 alignment 属性，因为这不会在键盘打开输入时向上移动聊天栏，我认为这没有意义。

图片

然后对于图像，我使用了另一列（尽管特别是这里存在许多选项，我只是喜欢我的列），它看起来像：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Expanded(
      child: Image(..., width: double.maxFinite,),
    ),
  ],
),

请注意，为图像指定宽度 double.maxFinite 可确保当宽度小于屏幕宽度时图像水平居中。

那看起来像什么

对于普通图像（高分辨率），它将图像垂直居中，并在水平方向填充可用 space。如果打开键盘，聊天栏会向上移动，图像现在居中在剩余的 space 中。如果图像足够高，stack 将导致图像与聊天栏重叠一点。如果它不够宽，它只会水平居中。请参阅下面的屏幕截图：

最后，对于小图像，它在水平和垂直方向上都居中。

密码

为了完整起见，这是我使用的代码。对于图像，我使用了网络图像，但同样适用。

return Scaffold(
      body: Stack(
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
            Expanded(child: Image.network('https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg', width: double.maxFinite,),),
          ],),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: [Row(
            children: [
              Expanded(
                child: Container(
                  margin: EdgeInsets.all(3),
                  height: 50,
                  child: TextField(
                    controller: _controller,
                    style: const TextStyle(
                        color: Colors.white),
                    decoration: InputDecoration(
                      contentPadding: const EdgeInsets.only(left: 15, top: 15,),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(300),
                        borderSide: const BorderSide(
                          width: 0,
                          style:
                          BorderStyle.none,
                        ),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(300),
                        borderSide: const BorderSide(
                          width: 0,
                          style: BorderStyle.none,
                        ),
                      ),
                      filled: true,
                      hintStyle: const TextStyle( color: Colors.grey, ),
                      hintText: "Message",
                      fillColor: Colors.grey[800],
                    ),
                  ),
                ),
              ),
              Container(
                margin: const EdgeInsets.all(3),
                height: 50,
                width: 50,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100),
                  color: const Color(0xff0077b6),
                ),
                padding: const EdgeInsets.all(8),
                child: GestureDetector(
                  child: const Icon(
                    Icons.send,
                    color: Colors.white,
                  ),
                  onTap: (){

                  },
                ),
              ),
            ],
          )],
          ),
        ],
      ),
    );

移除 space 周围的图像抖动

Remove space around an image flutter

stack

flutter

聊天栏和发送按钮

图片

那看起来像什么

密码