flutter - 无法将 Row 下拉

Question

我正在尝试将行拉到横轴的末端(到屏幕底部)。

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Container(
              child: FlutterLogo(
                size: 60,
              ),
            ),
            Container(
              child: FlutterLogo(
                size: 60,
                colors: Colors.red,
              ),
            ),
            Container(
              child: FlutterLogo(
              size: 60,
              colors: Colors.cyan,

            ),
            ),
          ],
        ));
  }
}

但它不起作用。我做错了什么？

Answer 1

您没有设置高度，所以将行包装在一个可以设置高度的小部件中例如。

 body: new Column(
   crossAxisAlignment: CrossAxisAlignment.end,
   mainAxisSize: MainAxisSize.max,
   mainAxisAlignment: MainAxisAlignment.end,
     children: [
      Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Container(
          child: FlutterLogo(
            size: 60,
          ),
        ),
        Container(
          child: FlutterLogo(
            size: 60,
            colors: Colors.red,
          ),
        ),
        Container(
          child: FlutterLogo(
          size: 60,
          colors: Colors.cyan,

        ),
        ),
      ],
    )
      ]
    ),

还有其他小部件可能会更好，但这取决于您的内容 https://api.flutter.dev/flutter/widgets/Align-class.html https://api.flutter.dev/flutter/widgets/Positioned-class.html