Flutter：在 flutter 中定位图像

Question

我刚开始学习 flutter 的一些教程，但我有一件事要存档。 我在代码中定位图像时遇到问题。 这就是问题所在。

.

如果有人可以重新编码，因为我正在尝试 2 天并且无法理解它是如何工作的。

我试图找到的解决方案是将徽标下的 position 图像放到右上角而不移动徽标和文本栏

我想要的草稿：

我的代码：

main.dart

import 'package:flutter/material.dart';
import 'package:kafe/screens/login_screen.dart';
 
 
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Email and Password Login',
      theme: ThemeData(
        primarySwatch: Colors.brown,
      ),
      home: LoginScreen(),
    );
  }
}

login_screen.dart

import 'package:flutter/material.dart';
 
class LoginScreen extends StatefulWidget {
  const LoginScreen({ Key? key }) : super(key: key);
 
  @override
  _LoginScreenState createState() => _LoginScreenState();
}
 
class _LoginScreenState extends State<LoginScreen> {
 // form key
 final _formKey = GlobalKey<FormState>();
 
 // Editing Controller
final TextEditingController emailController = new TextEditingController();
final TextEditingController passwordController = new TextEditingController();
final TextEditingController locationController = new TextEditingController();
 
  @override
  Widget build(BuildContext context) {
 
    //Name field
    final emailField = TextFormField(
      autofocus: false,
      controller: emailController,
      keyboardType: TextInputType.emailAddress,
    //validator: {} {},
    onSaved: (value)
    {
        emailController.text = value!;
 
    },
    textInputAction: TextInputAction.next,
    decoration: InputDecoration(
      prefixIcon: Icon(Icons.account_circle_outlined),
      contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      hintText: "Вашето име",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    );
 
    //password field
    final passwordField = TextFormField(
      autofocus: false,
      controller: passwordController,
    //validator: {} {},
    onSaved: (value)
    {
        passwordController.text = value!;
 
    },
    textInputAction: TextInputAction.next,
    decoration: InputDecoration(
      prefixIcon: Icon(Icons.call_end_outlined),
      contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      hintText: "Вашиот телефонски број",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    );
 
    //Location field
    final locationField = TextFormField(
      autofocus: false,
      controller: locationController,
 
    //validator: {} {},
    onSaved: (value)
    {
        locationController.text = value!;
 
    },
    textInputAction: TextInputAction.done,
    decoration: InputDecoration(
      prefixIcon: Icon(Icons.add_location_alt_outlined),
      contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      hintText: "Вашата локација",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20),
 
      ),
    )),
 
    // button
 
   loginButton = Material(
    elevation: 5,
    borderRadius: BorderRadius.circular(30),
    color: Colors.redAccent,
    child: MaterialButton(
      padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      minWidth: MediaQuery.of(context).size.width,
      onPressed: () {},
      child: Text(
        "Логирање", 
      textAlign: TextAlign.center, 
      style: TextStyle(fontSize: 20,
      color: Colors.white,
      fontWeight: FontWeight.bold,
       ),
      ),
    ),
  );        
 
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: SingleChildScrollView(
          child: Container(
            color: Colors.white,
            child: Padding(
              padding: const EdgeInsets.all(35.0),
              child: Form(
                key: _formKey,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget> [
 
                    SizedBox(
                      width: 130,
 
                      child: SizedBox(
                        child: Image.asset("assets/top.png",
                        fit: BoxFit.contain,
                        ),
                        ),
                    ),
 
 
 
                    SizedBox(
                      height: 250,
 
                      child: Image.asset(
                        "assets/logo.png",
 
                      fit: BoxFit.contain,
                      )
                    ),
 
 
 
 
 
                    emailField,
                    SizedBox(height: 30),
 
                    passwordField,
                    SizedBox(height: 30),
 
                    locationField,
                    SizedBox(height: 30),
                    loginButton,
                    SizedBox(height: 30),
                  ],
                ),
 
              ),
            ),
          ),
        ) ,
      ),
    );
  }
}

Answer 1

在您的小部件树上， logo.png放在top.png图像之后，这是一个订单问题，将logo作为第一个子元素放在Column

     crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    SizedBox(
                      height: 250,
                      child: Image.asset(
                        "assets/logo.png",
                        fit: BoxFit.contain,
                      ),
                    ),
                    SizedBox(
                      width: 130,
                      child: Image.asset(
                        "assets/top.png",
                        fit: BoxFit.contain,
                      ),
                    ),

但下一张图片描述你喜欢 position 的图片。 为此，使用Align小部件包装SizedBox 。

Align(
  alignment: Alignment.topLeft,
  child: SizedBox(
    width: 130,

另外，在这种情况下，我更喜欢Stack 。

Answer 2

您可以尝试定位或对齐和 go 玩它。 但是您需要它们按堆栈包装

          Stack(
            color: Colors.white,
            child:  Form(
                key: _formKey,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget> [
 
                    Positioned(
                      left:0,top:0
                      child: SizedBox(
                      width: 130,
 
                      child: SizedBox(
                        child: Image.asset("assets/top.png",
                        fit: BoxFit.contain,
                        ),
                        ),
                            ),
                              ),
              Align(
               alignment: Alingment.center,
               child: Column(
                children: [
                    SizedBox(
                      height: 250,
 
                      child: Image.asset(
                        "assets/logo.png",
 
                      fit: BoxFit.contain,
                      )
                    ),
 
 
 
 
 
                    emailField,
                    SizedBox(height: 30),
 
                    passwordField,
                    SizedBox(height: 30),
 
                    locationField,
                    SizedBox(height: 30),
                    loginButton,
                    SizedBox(height: 30),
                  ]
               )
                 ),
 
 
 
                    
                  ],
                ),
 
              ),
            ),
          ),