Question

我在Flutter上的卡片小部件中遇到文本对齐问题。由于设置了指令（例如：'Alignment.topCenter'），我无法正确对齐文本。

这是我的主要小部件代码

class _MyHomePageState extends State<MyHomePage> {
  Container _titleContainer() => Container(
        child: Row(
          children: <Widget>[
            Text('My Text Title',
                style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Colors.white)),
            Icon(
              Icons.arrow_forward_ios,
              color: Colors.white,
              size: 16,
            ),
          ],
        ),
      );

  ///Return a container with the title layout
  Container _subtitleContainer() => Container(
        child: Row(
          children: <Widget>[
            Text('My Text Subtitle',
                style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Colors.white)),
            Icon(
              Icons.arrow_forward_ios,
              color: Colors.white,
              size: 16,
            ),
          ],
        ),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ListView(
          children: <Widget>[
            MyCard(
              mainTitle: _titleContainer(),
              subtTitle: _subtitleContainer(),
              titleTextAlignment: Alignment.topCenter,
              subtitleTextAlignment: Alignment.bottomRight,
            ),
            MyCard(
              mainTitle: _titleContainer(),
              subtTitle: _subtitleContainer(),
              titleTextAlignment: Alignment.bottomCenter,
              subtitleTextAlignment: Alignment.bottomCenter,
            )
          ],
        ));
  }
}

这是卡片小部件代码

class MyCard extends StatelessWidget {
  final Container mainTitle;
  final Container subtTitle;

  ///Card desidered height. Else default 250
  final double height;

  ///Image scale factor
  final int scaleFactor;

  final bool linearGradient;

  final Alignment titleTextAlignment;

  final Alignment subtitleTextAlignment;

  const MyCard(
      {Key key,
      this.mainTitle,
      this.subtTitle,
      this.height,
      this.scaleFactor = 1,
      this.linearGradient = true,
      this.titleTextAlignment = Alignment.bottomLeft,
      this.subtitleTextAlignment = Alignment.bottomLeft})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // onTap: onPressed,
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 5),
        child: Card(
          elevation: 8,
          child: SizedBox(
            height: height != null && height > 0 ? height : 250.0,
            child: Stack(
              alignment: Alignment.center,
              children: <Widget>[
                // FutureBuilder(
                //   future: ,
                //   builder: (context, snapshot) {
                //     switch (snapshot.connectionState) {
                //       case ConnectionState.none:
                //       case ConnectionState.active:
                //       //Show a card with FCSBlue background
                //       case ConnectionState.waiting:
                //         return FCSLoader();
                //       case ConnectionState.done:
                //         if (snapshot.hasError) {
                //           return Text('Error: ${snapshot.error}');
                //         } else {
                //           final String imgStringUrl = snapshot.data;

                //           return Image(
                //             image: AdvancedNetworkImage(
                //               imgStringUrl,
                //               useDiskCache: true,
                //               cacheRule:
                //                   CacheRule(maxAge: const Duration(days: 7)),
                //             ),
                //             fit: BoxFit.cover,
                //           );
                //         }
                //     }
                //   },
                // ),
                linearGradient == true
                    ? Container(
                        decoration: new BoxDecoration(
                          gradient: new LinearGradient(
                            begin: Alignment.bottomCenter,
                            end: Alignment(0.0, -1.0),
                            colors: [Colors.green, Colors.transparent],
                          ),
                        ),
                        // borderRadius: new BorderRadius.all(...),
                        // gradient: new LinearGradient(...),
                      )
                    : Container(
                        color: Color.fromRGBO(32, 38, 48, 0.6),
                      ),
                Align(
                  alignment: titleTextAlignment,
                  child: Padding(
                      padding: EdgeInsets.all(10),
                      child: mainTitle != null ? mainTitle : Text('')),
                ),
                Align(
                  alignment: subtitleTextAlignment,
                  child: Padding(
                      padding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                      child: subtTitle != null ? subtTitle : Text('')),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在第一张卡片中，我希望文本与红点对齐。在第二张卡片中，我也遇到了相同的问题，但是在这种情况下，我获得了覆盖文字。我希望文本像在ListView / Column中那样排列。

我的样本：

希望我很清楚。谁能帮我吗？

Answer 1

不是将Align放到

内

FractionalTranslation(
  translation: Offset(dx, dy),
  //add your text widget to child
  //child:
),

dx和dy的偏移量是各自方向上的派系水平和垂直距离。

我想说，您玩这些游戏，您将了解自己。

以Offset(0.0,0.0)开头

然后将其更改为Offset(0.0,1)

并比较两个结果，希望您能理解。

如何动态对齐卡片中的文字？

1 个答案: