将行文本右对齐

Posted 2021-05-03

我正在尝试将“立即预订”文本和“添加到购物车”图标对齐到屏幕的右侧。我尝试添加文本对齐方式属性，也尝试使用扩展/列。它没有与屏幕的右侧对齐。有任何解决方法吗？谢谢

下面的示例代码和屏幕截图已在[https://www.dartpad.dev/flutter中尝试]

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        InkWell(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(Icons.add_shopping_cart),
              Text('Book Now', textAlign: TextAlign.right),
            ],
          ),
        )
      ],
    );
  }
}

答案

您想让它在右边对齐吗？

在第一行使用mainAxisAlignment: MainAxisAlignment.end。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        InkWell(
          child: Row(
            children: <Widget>[
              Icon(Icons.add_shopping_cart),
              Text('Book Now', textAlign: TextAlign.right),
            ],
          ),
        )
      ],
    );
  }
}

另一答案

尝试一下：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment:  Alignment.centerRight,
      child: InkWell(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Icon(Icons.add_shopping_cart),
            Text('Book Now', textAlign: TextAlign.right),
          ],
        ),
      ),
    );
  }
}