[flutter]为什么我的列对齐总是居中? [英] [flutter]Why my column alignment is always center?

问题描述

我连续声明了两列来布局文本和图标.

I declared two columns in a row to layout the text and the icon.

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

The column for the icon is always center even if I set the mainAxisAlignment with 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(),
    ));
  }
}

实际布局如下:

推荐答案

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

Use crossAxisAlignment: CrossAxisAlignment.start And for future, I would suggest you to add code that is independent of other code so that others can run it and see.

这篇关于[flutter]为什么我的列对齐总是居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！