flutter 在AppBarComponent的右侧显示文本

vwkv1x7d  于 2023-02-16  发布在  Flutter
关注(0)|答案(3)|浏览(247)

我有一个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',
            ),
          ],
        ),
      ],
    );
  }
}

结果是这样的:

但我想要的是在appbar的右边显示副标题。

4c8rllxm

4c8rllxm1#

哦!我已经用

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

而不是用Row Package 它。

h43kikqp

h43kikqp2#

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,]),
            ),
          ),
        ),
ryevplcw

ryevplcw3#

不建议使用Widget函数,而是使用Stateful/Stateless小部件,因此您可以像这样实现它...

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('Title'),
      actions: const <Widget>[
        Text('Subtitle'),
      ],
    );
  }
}

相关问题