带有填充和TextAlign的Flutter Dart错误

Question

我正在尝试删除每张卡之间的空间并在中间获取用餐文字

它来自EdgeInsets.only（top：220），，但由于AppBar之间的间隔，因此需要此。

试图创建一个新的小部件，但这不起作用，然后出现StreamBuilder错误。我也尝试添加到页边空白MediaQuery.removePadding（removeTop：true），，但也出现错误。

我的Secound问题，我希望餐文本在中间，我添加了textAlign：TextAlign.center。在Date上它起作用了，但是为什么它不在顶部？

代码

import 'package:flutter/material.dart';
import 'package:mealapp/models/Widgets/whenAndWhatToEat.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:intl/intl.dart';
import 'package:mealapp/models/global.dart';


class MealTile extends StatefulWidget {
  final MealsAndWhen mealsAndWhen;
  MealTile ({ this.mealsAndWhen });

  @override
  MealTileState createState() {
    return MealTileState();
  }
}
class MealTileState extends State<MealTile> {
  String id;
  final db = Firestore.instance;
  String meal;

  Widget buildItem(DocumentSnapshot doc) {
    return Padding(
      padding: EdgeInsets.only(top: 220),
      child: Container(
        margin: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Meal: ${doc.data['Meal']}',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
              textAlign: TextAlign.center,
            ),
            Text(
              'Date: ${doc.data['Date']}',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 12),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                SizedBox(width: 8),
                FlatButton(
                  onPressed: () => deleteData(doc),
                  child: Text('Delete',
                  style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white)),
                ),
              ],
            ),
          ],
        ),
        decoration: BoxDecoration(
          color: lightBlueColor,
          borderRadius: BorderRadius.all(Radius.circular(12)),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: darkGreyColor,
      body: ListView(
        padding: EdgeInsets.all(8),
        children: <Widget>[
          StreamBuilder<QuerySnapshot>(
            stream: db.collection('mealList').snapshots(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Column(children: snapshot.data.documents.map((doc) => buildItem(doc)).toList());
              } else {
                return SizedBox();
              }
            },
          )
        ],
      ),
    );
  }

  void deleteData(DocumentSnapshot doc) async {
    await db.collection('mealList').document(doc.documentID).delete();
    setState(() => id = null);
  }
}

[<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9tUHpjSi5wbmcifQ==” alt =“卡之间的空间”>]

Answer 1

不是将填充物应用于卡，而是将您的ListView包裹在Padding小部件中并在其中应用。

要对齐Text，请将其包装在Center小部件中。

Answer 2

要向Text小部件添加填充，只需将padding属性添加到Container

      padding: EdgeInsets.all(12),

[居中放置Text，只需将CrossAxisAlignment.start替换为CrossAxisAlignment.center

Column(
    **crossAxisAlignment: CrossAxisAlignment.center,**
    children: <Widget>[
      Text(
        'Meal: Example Meal',
        style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: Colors.white),
        textAlign: TextAlign.center,
      ),
      Text(
        'Date: Example Date',
        style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: Colors.white),
        textAlign: TextAlign.center,
      ),

以下是输出：