Flutter，文本到顶部

Question

我已经开始使用 Flutter 了。

我创建了一个页面，看起来像这样：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:smooth_star_rating/smooth_star_rating.dart';
import 'package:intl/intl.dart';

class LandOffer extends StatefulWidget {
  final String startPoint;
  final String endPoint;

  const LandOffer({Key key, this.startPoint, this.endPoint}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _LandOffer(startPoint: this.startPoint, endPoint: this.endPoint);
  }
}

class _LandOffer extends State<LandOffer> {
  final String startPoint;
  final String endPoint;
  var _json;
  String _name;
  String _lastName;
  String _image;
  var isLoading = false;

  _fetchBackendData() async {
    setState(() {
      isLoading = true;
      print('Beginning loading');
    });
    final response =
        await http.get("https://randomuser.me/api/?inc=name,picture");
    if (response.statusCode == 200) {
      _json = json.decode(response.body);
      setState(() {
        isLoading = false;
        _name = toBeginningOfSentenceCase(_json['results'][0]['name']['first']);
        _lastName =
            toBeginningOfSentenceCase(_json['results'][0]['name']['last']);
        _image = _json['results'][0]['picture']['large'];
        print('Done loading...');
      });
    } else {
      throw Exception('Failed to load backend data');
    }
  }

  @override
  void initState() {
    super.initState();
    _fetchBackendData().then((result) {
      print('Feched data from backend');
    });
  }

  _LandOffer({this.startPoint, this.endPoint});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Describe your offer '),
          automaticallyImplyLeading: true,
        ),
        body: isLoading
            ? Center(
                child: CircularProgressIndicator(),
              )
            : ListView(
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Image(
                            image: NetworkImage(_image),
                          ),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                'First name: $_name',
                                textAlign: TextAlign.left,
                              ),
                              Text(
                                'Last name: $_lastName',
                                textAlign: TextAlign.left,
                              ),
                              Text('Rating'),
                              SmoothStarRating(
                                rating: 3.2,
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ));
  }
}

此外还显示如下图像：

但似乎文本中添加了填充。

我想将文本移到最顶部，并添加一个填充，如果我需要的话。

此外，如果我将填充应用于图像，它会将填充应用于整行，这不是所需的结果。

预先感谢您的帮助。

Answer 1

因为你的图片行高更大，如果你给图片添加padding（假设上下左右都有），行高也会增加。除非你只想要 padding(left, right) 或者你需要限制图像高度。

  Row(
    crossAxisAlignment: CrossAxisAlignment.start,    //<-- move text top
    children: <Widget>[
      Padding(
        padding: EdgeInsets.all(5),
        child: Image(
          image: NetworkImage(_image),
        ),
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,   //<-- move text top
        children: <Widget>[
          Text(
            'First name: $_name',
            textAlign: TextAlign.left,
          ),
          Text(
            'Last name: $_lastName',
            textAlign: TextAlign.left,
          ),
          Text('Rating'),
          SmoothStarRating(
            rating: 3.2,
          ),
        ],
      ),
    ],
  ),

Flutter，文本到顶部

Flutter, text to top

text

text-alignment

dart

flutter