Flutter：更改应用栏上文本的位置答案

【问题标题】：Flutter : change position of text on the appbarFlutter：更改应用栏上文本的位置
【发布时间】：2020-03-30 23:02:47
【问题描述】：

如何更改应用栏右侧文本“Sito Web”的位置？我试着用

alignment: Alignment.TopRight

但他将其移动到应用栏右上角的文本。这是我的意思https://ibb.co/X28TzNN 的屏幕，将“Sito Web”的位置更改为红色圆圈的位置。这就是代码，我也尝试过这种方法，但无法在应用栏中移动。这里是带有appbar background_image_task-9.dart的文件

import 'package:flutter/material.dart';

class BackgroundImage extends StatelessWidget{
  final Widget body;
  BackgroundImage({this.body});
    @override
    Widget build(BuildContext context){
      return Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: Text('Blumax', style: TextStyle(
            fontWeight: FontWeight.w500,
            fontFamily: 'DancingScript',
            fontSize: 40
          ),),
          centerTitle: false,
        ),
        body: Stack(
          children: <Widget>[Container(
          decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage("assets/blumax.jpg"), fit: BoxFit.cover),
          ),
        ),
          body
         ]
       )
    );
  }
}

这里是带有容器 hyperlink.dart 的文件

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

class Hyperlink extends StatelessWidget {
  final String _url;
  final String _text;

  Hyperlink(this._url, this._text);

  _launchURL() async {
    if (await canLaunch(_url)) {
      await launch(_url);
    } else {
      throw 'Could not launch $_url';
    }
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        alignment: Alignment(0.9, -1.0),
      child: Text(
        _text,
        textAlign: TextAlign.right,
        style: TextStyle(
          fontFamily: 'RobotoMono',
          fontSize: 20,
          color: Colors.white,
          decoration: TextDecoration.underline),
      )),
      onTap: _launchURL,
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'background_image_task-9.dart';
import 'hyperlink.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Blumax',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: myColour
      ),
      home: BackgroundImage(
        body: Center(
          child: Hyperlink('www.test.it', 'Sito Web',),
        ),
      )
    );
  }
}

【问题讨论】：

您是否只想在 appbar 上显示文本 Blumax 以右对齐？你能展示你想要达到的效果吗？
@Darshan 我解决了这个问题，添加了 main.dart。顺便说一句，我想在红色圆圈ibb.co/X28TzNN的位置更改文本“Sito Web”的位置

标签： android flutter dart flutter-layout

【解决方案1】：

您可以使用Row 小部件并使用mainAxisAlignment: MainAxisAlignment.spaceBetween 分别在appbar 的左侧和右侧渲染BluMax 和Sito Web 元素。由于您想在点击sito web 后打开一个网址，您可以使用GestureDetector 包装该元素，然后调用launchURL 方法打开所需的网址。一个工作示例代码如下：

appBar: AppBar(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text('Blumax'),
              GestureDetector(
                  child: Text('Sito Web'),
                  onTap: _openURL
              )

            ],
          ),
          centerTitle: false,
          actions: <Widget>[
            PopupMenuButton<int>(
              itemBuilder: (context) =>
              [
                PopupMenuItem(
                  value: 1,
                  child: Text("First"),
                ),
                PopupMenuItem(
                  value: 2,
                  child: Text("Second"),
                ),
              ],
            )
          ],
        ),

这在屏幕上呈现为：

...

void _openURL() async {
      const url = 'https://flutter.dev';
      if (await canLaunch(url)) {
        await launch(url);
      } else {
        throw 'Could not launch $url';
      }
    }

我刚刚使用text Blumax 进行演示，但您可以根据需要更换它。

希望这能回答你的问题。

【讨论】：