首页 > 解决方案 > Flutter:如何指定文本的位置?

问题描述

所以,我想在我正在做的应用程序的图像下方添加一个文本。但是,文本似乎出现在图像旁边,而不是下面:

在此处输入图像描述

我希望它出现在图像下方,如下面的屏幕截图:

在此处输入图像描述

这是我的 main.dart 代码:

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new LoginPage(),
      theme: new ThemeData(
        primarySwatch: Colors.green
      )
    );
  }
}

这是我的 login_page.dart 代码:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget{
  @override  
  State createState() => new LoginPageState();
}

class LoginPageState extends State<LoginPage>{
  @override 
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: AppBar(
        title: new Text("SMARTID", textAlign: TextAlign.center, style: TextStyle(fontFamily: 'Open Sans', fontWeight: FontWeight.bold)),
        leading: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.asset(
            "assets/arrowPNG.png",
            scale: 8.0,
          )
        )
      ),
      backgroundColor: Colors.transparent,
      body: new Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset('assets/arrowPNG.png', scale: 2.5),
          ]
        ),
        alignment: Alignment(0, -0.5),
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/background.png'),
            fit: BoxFit.cover,
          )
        )
      )
    );
  }
}

我该如何解决这个问题?

标签: flutterdart

解决方案


这是您的解决方案,您应该将其放在Text("SMARTID") 下面Image.asset 的 a Columnnot in aRow

class LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("SMARTID", textAlign: TextAlign.center,
                style: TextStyle(
                    fontFamily: 'Open Sans', fontWeight: FontWeight.bold)),
            leading: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Image.asset(
                  "assets/images/appicon.png",
                  scale: 8.0,
                )
            )
        ),
        backgroundColor: Colors.transparent,
        body: Container(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.asset('assets/images/appicon.png', scale: 2.5),
                  SizedBox(height: 20,),
                  Text("SMARTID", style: TextStyle(
                      fontSize: 30, color: Colors.white,fontFamily: 'Open Sans',
                      fontWeight: FontWeight.bold))
                ]
            ),
            alignment: Alignment(0, -0.5),
            width: MediaQuery
                .of(context)
                .size
                .width,
            height: MediaQuery
                .of(context)
                .size
                .height,
            decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/background.jpg'),
                  fit: BoxFit.cover,
                )
            )
        )
    );
  }
}

输出,

在此处输入图像描述


推荐阅读