Question

我连续声明了两列以布局文本和图标。

即使我将mainAxisAlignment设置为MainAxisAlignment.start，图标的列也始终居中。

这是卡的代码：

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:life_logger/models.dart';
import 'package:life_logger/screens/entry_editor_screen.dart';
import 'package:life_logger/widgets/dot.dart';

Wrap buildActivities(Entry entry) {
  var children = <Widget>[];
  var idx = 0;
  entry.activities.forEach((activity) {
    var element = Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
      Icon(
        activity.iconData,
        color: entry.mood.color,
      ),
      SizedBox(
        width: 3,
      ),
      Text(
        '${activity.description}',
        style: TextStyle(color: Colors.grey),
      ),
    ]);
    children.add(element);
    if (idx < entry.activities.length - 1) {
      children.add(Dot());
    }
    idx++;
  });
  return Wrap(
    children: children,
    spacing: 5,
    crossAxisAlignment: WrapCrossAlignment.center,
  );
}

Widget buildEntryRow(Entry entry, BuildContext context) {
  var entryRow = GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => EntryEditorScreen(entry)),
        );
      },
      child: Row(
        children: <Widget>[
          // the column for the icon
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(left: 8.0, right: 8.0),
                child: Icon(
                  entry.mood.iconData,
                  color: entry.mood.color,
                  size: 48,
                ),
              ),
            ],
          ),
          Expanded(
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Baseline(
                      baseline: 30.0,
                      baselineType: TextBaseline.alphabetic,
                      child: Text(
                        entry.mood.description,
                        style: TextStyle(
                          color: entry.mood.color,
                          fontSize: 24,
                        ),
                      ),
                    ),
                    Baseline(
                      baseline: 30.0,
                      baselineType: TextBaseline.alphabetic,
                      child: Text(
                        DateFormat.Hm().format(entry.createdAt),
                        style: TextStyle(
                          color: Colors.grey,
                          fontSize: 16,
                        ),
                      ),
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Expanded(child: buildActivities(entry)),
                  ],
                ),
                Row(
                  children: <Widget>[
                    Text(
                      entry.note,
                      style: TextStyle(
                        color: Colors.grey,
                        fontSize: 16,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ));
  return entryRow;
}

class EntryCard extends StatefulWidget {
  final List<Entry> entries;

  EntryCard(this.entries);

  @override
  _EntryCardState createState() => _EntryCardState();
}

class _EntryCardState extends State<EntryCard> {
  @override
  Widget build(BuildContext context) {
    var dateRow = Container(
        height: 30,
        decoration: BoxDecoration(
          color: widget.entries[0].mood.color.withOpacity(0.5),
          borderRadius: BorderRadius.all(Radius.circular(4.0)),
        ),
        child: Row(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(left: 24.5, right: 24.5),
              child: Ring(
                size: 5.0,
                color: widget.entries[0].mood.color,
              ),
            ),
            Text(
              DateFormat('EEEEE, M月d日').format(widget.entries[0].createdAt),
              style: TextStyle(
                color: widget.entries[0].mood.color,
                fontSize: 14,
              ),
            )
          ],
        ));
    return Card(
        child: Column(
      children: <Widget>[dateRow] +
          widget.entries.map((entry) => buildEntryRow(entry, context)).toList(),
    ));
  }
}

实际布局如下：

Imgur

Answer 1

如果你愿意，你可以根据你调整列。这是如何在开始时调用列小部件的代码。

    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,

Answer 2

使用crossAxisAlignment: CrossAxisAlignment.start 为了将来，我建议您添加独立于其他代码的代码，以便其他人可以运行它并查看。

Answer 3

就像一个小部件一样

 Container(
            child: Align(
              alignment: Alignment.centerRight,
              child: Text(S.current.forgetPassword),
            ),
          ),

或所有

mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,

[flutter]为什么我的列对齐始终始终居中？

3 个答案: