Flutter 如何使圆形头像的位置保持静态，以便在将文本输入表单时不会更改

发布于08月08日

这个忘记密码的代码和我用了Stack和2个容器，并在它们上面圈出了头像.

计划开始时，一切都很好，但当我填写表格时.圆圈化身倒下.我该怎么解决这个问题呢？

保证金的使用是这样做的原因吗，但我如何将巡回头像放在中间？

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

import 'Login.dart';

class Restartpassword extends StatelessWidget {
  const Restartpassword({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.deepPurple.withOpacity(0.2),
          width: double.infinity,
          child: Center(
            child: Stack(
              children: [
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 20),
                    height: 400,
                ),
                Center(
                  child: Container(
                    padding: EdgeInsets.symmetric(horizontal: 20),
                     height: 300,
                     decoration: BoxDecoration(
                         border: Border.all(
                             width: 1,
                             color: Colors.grey
                         )
                     ),
                    child: Column(
                      mainAxisAlignment:MainAxisAlignment.center ,
                      children: [
                        Container(
                          //----------------------------------------------------
                            decoration: BoxDecoration(
                              color: Colors.deepPurple.withOpacity(0.1),
                              border: Border(
                                left: BorderSide(color: Colors.deepPurple,width: 10),
                              ),
                            ),
                            //----------------------------------------------------
                            width: 300,
                            height: 50,
                            //----------
                            child:TextFormField(
                              style: GoogleFonts.pacifico(
                                color: Colors.purple,
                                fontSize: 20.0,
                              ),
                              //----------------------------------
                              keyboardType:TextInputType.text ,
                              //----------------------------------
                              validator: (value) {
                                if (value == null || value.isEmpty) {
                                  return 'Please enter some text';
                                }
                                return null;
                              },
                              //-----------------------------------
                              decoration: InputDecoration(
                                prefixIcon: Icon(Icons.lock_open_sharp,color:Colors.purple),
                                border: InputBorder.none,
                                hintText: '***New Password***',
                                hintStyle: GoogleFonts.pacifico(
                                    color: Colors.black54,
                                    fontSize: 15,
                                    fontWeight: FontWeight.bold
                                ),
                                fillColor: Colors.black12.withOpacity(0.2),
                                filled: true,

                                //-----------------------------------

                              ),
                            )),
                        SizedBox(
                          height: 10,
                        ),
                        Container(
                          //----------------------------------------------------
                            decoration: BoxDecoration(
                              color: Colors.deepPurple.withOpacity(0.1),
                              border: Border(
                                left: BorderSide(color: Colors.deepPurple,width: 10),
                              ),
                            ),
                            //----------------------------------------------------
                            width: 300,
                            height: 50,
                            //----------
                            child:TextFormField(
                              style: GoogleFonts.pacifico(
                                color: Colors.purple,
                                fontSize: 20.0,
                              ),
                              //----------------------------------
                              keyboardType:TextInputType.text ,
                              //----------------------------------
                              validator: (value) {
                                if (value == null || value.isEmpty) {
                                  return 'Please enter some text';
                                }
                                return null;
                              },
                              //-----------------------------------
                              decoration: InputDecoration(
                                prefixIcon: Icon(Icons.lock_outline,color:Colors.purple),
                                border: InputBorder.none,
                                hintText: '***Confirm Password***',
                                hintStyle: GoogleFonts.pacifico(
                                    color: Colors.black54,
                                    fontSize: 15,
                                    fontWeight: FontWeight.bold
                                ),
                                fillColor: Colors.black12.withOpacity(0.2),
                                filled: true,

                                //-----------------------------------

                              ),
                            )),
                        SizedBox(
                          height: 10,
                        ),
                        Container(
                          width:130 ,
                          height: 45,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(15)
                          ),
                          child: MaterialButton(
                            minWidth: 130,
                              hoverColor: Colors.purple,
                              color: Colors.green,
                              onPressed: (){
                                Navigator.push(context, MaterialPageRoute(builder: (context) => loginScreen())) ;
                              },
                              child: Text('Restart '
                                ,style: GoogleFonts.pacifico(
                                  color: Colors.white,
                                  fontSize: 20.0,
                                ),
                              )),
                        )
                      ],

                    ),

              ),
                ),
                Container(
                  height: 80,
                  width: 80,
                  margin: EdgeInsetsDirectional.only(
                    start: 165,
                        top: 210
                  ),
                  child: CircleAvatar(
                    backgroundColor:Colors.white.withOpacity(0.3),
                    radius: 30,
                    child: Icon(Icons.lock,size: 60,
                    color: Colors.purple,),
                  ),
                ),
              ],
            ),
          ),
        )
      ),
    );
  }
}

like this

import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( title: 'Flutter Demo', home: Restartpassword(), debugShowCheckedModeBanner: false, ); } } class Restartpassword extends StatelessWidget { const Restartpassword({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Container( color: Colors.deepPurple.withOpacity(0.2), width: double.infinity, child: Center( child: Container( margin: const EdgeInsets.symmetric(horizontal: 40), padding: const EdgeInsets.symmetric(horizontal: 20), height: 300, decoration: BoxDecoration(border: Border.all(width: 1, color: Colors.grey)), child: Stack( children: [ Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( //---------------------------------------------------- decoration: BoxDecoration( color: Colors.deepPurple.withOpacity(0.1), border: const Border( left: BorderSide( color: Colors.deepPurple, width: 10), ), ), //---------------------------------------------------- width: 300, height: 50, //---------- child: TextFormField( style: const TextStyle( color: Colors.purple, fontSize: 20.0, ), //---------------------------------- keyboardType: TextInputType.text, //---------------------------------- validator: (value) { if (value == null || value.isEmpty) { return 'Please enter some text'; } return null; }, //----------------------------------- decoration: InputDecoration( prefixIcon: const Icon(Icons.lock_open_sharp, color: Colors.purple), border: InputBorder.none, hintText: '***New Password***', hintStyle: const TextStyle( color: Colors.black54, fontSize: 15, fontWeight: FontWeight.bold), fillColor: Colors.black12.withOpacity(0.2), filled: true, //----------------------------------- ), )), const SizedBox( height: 10, ), Container( //---------------------------------------------------- decoration: BoxDecoration( color: Colors.deepPurple.withOpacity(0.1), border: const Border( left: BorderSide( color: Colors.deepPurple, width: 10), ), ), //---------------------------------------------------- width: 300, height: 50, //---------- child: TextFormField( style: const TextStyle( color: Colors.purple, fontSize: 20.0, ), //---------------------------------- keyboardType: TextInputType.text, //---------------------------------- validator: (value) { if (value == null || value.isEmpty) { return 'Please enter some text'; } return null; }, //----------------------------------- decoration: InputDecoration( prefixIcon: const Icon(Icons.lock_outline, color: Colors.purple), border: InputBorder.none, hintText: '***Confirm Password***', hintStyle: const TextStyle( color: Colors.black54, fontSize: 15, fontWeight: FontWeight.bold), fillColor: Colors.black12.withOpacity(0.2), filled: true, //----------------------------------- ), )), const SizedBox( height: 10, ), Container( width: 130, height: 45, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15)), child: MaterialButton( minWidth: 130, hoverColor: Colors.purple, color: Colors.green, onPressed: () { // Navigator.push(context, MaterialPageRoute(builder: (context) => loginScreen())) ; }, child: const Text( 'Restart ', style: TextStyle( color: Colors.white, fontSize: 20.0, ), )), ) ], ), ), Transform.translate( offset: const Offset(0, -40), child: Align( alignment: Alignment.topCenter, child: SizedBox( height: 80, width: 80, // margin: EdgeInsetsDirectional.only(start: 165, top: 210), child: CircleAvatar( backgroundColor: Colors.white.withOpacity(0.3), radius: 30, child: const Icon( Icons.lock, size: 60, color: Colors.purple, ), ), ), ), ), ], ), ), ), )), ); } }

Flutter 如何使圆形头像的位置保持静态，以便在将文本输入表单时不会更改

推荐答案

Flutter相关问答推荐

Box约束强制无限高：SizedBox. Expand()

在Flutter 中将参数从一个类传递到另一个类

使用自定义控制器将项插入到ListView中时行为不正确

在Flutter 中创建自定义形状

为什么我的Flutter 动画过渡没有发生？

Flutter 中的 setState() 内部是如何工作的？

处理 flutter/dart 模型中的空值

打开键盘时屏幕组件会被压扁

Flutter - Stripe：类型List 不是类型Map 的子类型？ method_channel_stripe.dart 中的错误：263

点击按钮后重新启动定时器

FutureProvider 不返回数据给 UI

如何在Flutter中动态绘制一条从A点到B点的线？

如何从 Flutter 中的 App2 远程点击 App1 中的按钮

有没有办法为文本中的下划线创建自定义样式？

Flutter/Dart 返回_Future的实例而不是实际的字符串值

在 Flutter 中，您什么时候应该更喜欢Widget继承而不是组合？

使用 hydrad_bloc 的预览包

Textfield 和 MasonryGrid 给出错误(垂直视口的高度没有限制)

如何在 ElevatedButton 上设置背景 colored颜色动画？

未处理的异常：FileSystemException：无法打开文件，路径 = 'assets/res.zip'(操作系统错误：没有这样的文件或目录，errno = 2)