Question

我想在Card子项上对齐我的按钮，但是以某种方式使所有内容不可见主要问题是我希望按钮在宽度上均匀匹配。

   import 'package:flutter/material.dart';
import 'loginemail.dart';

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  MyApp({this.title});
  final Widget title;

  @override
  Widget build(BuildContext context) {
    return Container(
        // height: 56.0, // in logical pixels
        // padding: const EdgeInsets.symmetric(horizontal: 8.0),
        // decoration: BoxDecoration(color: Colors.blue[500]),
        // Row is a horizontal, linear layout.

        );
  }
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Material is a conceptual piece of paper on which the UI appears.
    return Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('images/boracay.jpg'), fit: BoxFit.cover)),
        // Column is a vertical, linear layout.

        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Card(
              child: Container(
                  child: Padding(
                padding: EdgeInsets.fromLTRB(14.0, 32.0, 14.0, 14.0),
                child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,

                crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[

                    Text(
                      'Test',
                      style: TextStyle(fontWeight: FontWeight.bold,color: Colors.greenAccent,fontSize: 32.0),
                    ),
                    SizedBox(height: 32.0,),

                    RaisedButton(child: Row(children: <Widget>[Text('Login'),Icon(Icons.input)],),onPressed: (){},),
                    RaisedButton(child : Row(children: <Widget>[Text('Sign Up'),Icon(Icons.create)],),onPressed: (){},),
                    RaisedButton(child : Row(children: <Widget>[Text('Google Log In'),Icon(Icons.create)],),onPressed: (){},)
                  ],
                  mainAxisSize: MainAxisSize.min,
                ),
              )),
            )
          ],
        ));
  }
}

void main() {
  runApp(MaterialApp(
    title: 'My app', // used by the OS task switcher
    home: MyScaffold(),
  ));
}

现在，我将其设置为[开始]，因为我的小部件在伸展时变得不可见。我还添加了背景图片，但我不知道这是否是拉伸无法正常工作的原因。

Answer 1

您正在拉伸无边界的东西，这就是为什么小部件不知道它们应该拉伸多大的原因。您需要做的就是简单地向持有Column的Container的width属性添加一个值。

@override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Card(
            child: Container(
              /// Changes happen here.
              width: 300.0,
              padding: const EdgeInsets.fromLTRB(14.0, 32.0, 14.0, 14.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Text(
                    'Test',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.greenAccent,
                      fontSize: 32.0,
                    ),
                  ),
                  SizedBox(height: 32.0),
                  RaisedButton(
                    child: Row(
                      children: <Widget>[Text('Login'), Icon(Icons.input)],
                    ),
                    onPressed: () {},
                  ),
                  RaisedButton(
                    child: Row(
                      children: <Widget>[Text('Sign Up'), Icon(Icons.create)],
                    ),
                    onPressed: () {},
                  ),
                  RaisedButton(
                    child: Row(
                      children: <Widget>[
                        Text('Google Log In'),
                        Icon(Icons.create)
                      ],
                    ),
                    onPressed: () {},
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

crossAxisAlignment.stretch使所有内容都不可见

1 个答案: