在AppBarComponent的右侧显示文本

huangapple go评论58阅读模式
英文:

Display Text on right side of AppBarComponent

问题

以下是代码部分的中文翻译:

所以我有这个显示我的应用程序应用栏的 AppBarComponent

class AppBarComponent {
  static Widget titleWithImage(String title) {
    return Row(
      children: <Widget>[
        Image.asset(
          'logo.png',
          fit: BoxFit.contain,
          width: 40,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          child: Text('title'),
        ),
        Row(
          children: [
            Text(
              'subtitle',
            ),
          ],
        ),
      ],
    );
  }
}

希望这个翻译对您有所帮助。

英文:

So I have this AppBarComponent that displays the appbar of my app.

class AppBarComponent {
  static Widget titleWithImage(String title) {
    return Row(
      children: &lt;Widget&gt;[
        Image.asset(
          &#39;logo.png&#39;,
          fit: BoxFit.contain,
          width: 40,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10.0),
          child: Text(&#39;title&#39;),
        ),
        Row(
          children: [
            Text(
              &#39;subtitle&#39;,
            ),
          ],
        ),
      ],
    );
  }
}

The result is something like this:

在AppBarComponent的右侧显示文本

But what I want is to display the subtitle on the right side of the appbar.

答案1

得分: 1

我已解决它,使用以下代码:

Expanded(
  child: Text(
    'subtitle',
    textAlign: TextAlign.end,
  ),
),

而不是用Row来包裹它。

英文:

Oh! I have resolved it using

Expanded(
      child: Text(
        &#39;subtitle&#39;,
        textAlign: TextAlign.end,
      ),
    ),

instead of wrapping it with Row.

答案2

得分: 0

以下是代码部分的翻译:

appBar: AppBar(
  leading: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Image.network(
      "https://www.clipartmax.com/png/middle/200-2009207_francais-english-italiano-english-flag-icon-flat.png",
      fit: BoxFit.cover,
      width: 30.0,
      height: 30.0,
    ),
  ),
  title: Row(children: [
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10.0),
      child: Text('title'),
    ),
    Row(
      children: [
        Text('subtitle'),
      ],
    ),
  ]),
  flexibleSpace: Container(
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: <Color>[Colors.black, Colors.blue, Colors.black],
      ),
    ),
  ),
),

请注意,我只提供了代码部分的翻译,没有包含其他内容。

英文:
 appBar: AppBar(
          leading: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Image.network(
              &quot;https://www.clipartmax.com/png/middle/200-2009207_francais-english-italiano-english-flag-icon-flat.png&quot;,
              fit: BoxFit.cover,
              width: 30.0,
              height: 30.0,
            ),
          ),
          title: Row(children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Text(&#39;title&#39;),
            ),
            Row(
              children: [
                Text(
                  &#39;subtitle&#39;,
                ),
              ],
            ),
          ]),
          flexibleSpace: Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,

                  colors: &lt;Color&gt;[Colors.black, Colors.blue,Colors.black,]),
            ),
          ),
        ),

答案3

得分: 0

不建议使用 Widget 函数,而是使用 Stateful/Stateless widgets,这样你可以像这样实现它...

class AppBarComponent extends StatelessWidget {

  const AppBarComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      leading: const Icon(Icons.circle), //TODO 替换为你的标志
      title: const Text('标题'),
      actions: const <Widget>[
        Text('副标题'),
      ],
    );
  }
}
英文:

It's not recommended to use Widget function instead use Stateful/Stateless widgets, so you can achieve it like that...

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-dart -->

class AppBarComponent extends StatelessWidget {

  const AppBarComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      leading: const Icon(Icons.circle), //TODO replace with your logo
      title: const Text(&#39;Title&#39;),
      actions: const &lt;Widget&gt;[
        Text(&#39;Subtitle&#39;),
      ],
    );
  }
}

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月16日 16:03:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/75469351.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定