如何将行和列的大小设置为flutter的父窗口小部件？

Question

在Column小部件的Row中使用Card，如何将Column宽度设置为与行小部件一样大？

return Card(
  child: Row(
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(4.0),
        child: Container(
          width: 100.0,
          height: 100.0,
          // container for image
          color: Colors.grey,
        ),
      ),
      Column(
        //crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Item Name',
            textAlign: TextAlign.left,
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            'Previous Price',
            style: TextStyle(fontSize: 15.0, color: Colors.grey),
          ),
          Row(
            children: <Widget>[
              RaisedButton(
                textColor: Colors.white,
                child: Text('Add'),
              ),
              Icon(Icons.add),
              Container(
                width: 50.0,
                height: 50.0,
                child: Text('12'),
                color: Colors.red[200],
              ),
              Icon(Icons.remove),
            ],
          ),
        ],
      ),
    ],
  ),
)

Answer 1

我对您的描述有些困惑，

但是crossAxisAlignment: CrossAxisAlignment.stretch可能是标题的答案。

Answer 2

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
      child: Container(
        child: Card(
          child: Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(4.0),
                child: Container(
                  width: 100.0, height: 100.0,

                  // container for image
                  color: Colors.grey,
                ),
              ),
              Container(
                color: Colors.red,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  //crossAxisAlignment: CrossAxisAlignment.stretch,

                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'Item Name',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      'Previous Price',
                      style: TextStyle(fontSize: 15.0, color: Colors.grey),
                    ),
                    Container(
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        children: <Widget>[
                          RaisedButton(
                            textColor: Colors.white,
                            child: Text('Add'),
                            onPressed: () {},
                          ),
                          Icon(Icons.add),
                          Padding(
                            padding: const EdgeInsets.all(5.0),
                            child: Container(
                              width: 50.0,
                              height: 50.0,
                              child: Center(child: Text('12')),
                              color: Colors.red[200],
                            ),
                          ),
                          Icon(Icons.remove),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    )));
  }
}

让我知道这是否可行，也许我是正确的，但是描述仍然令人困惑。查看您的代码，我做出了预测。谢谢。

Answer 3

尝试使用，

Expanded(
  child:Container(
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        children: <Widget>[
                          RaisedButton(
                            textColor: Colors.white,
                            child: Text('Add'),
                            onPressed: () {},
                          ),
                          Icon(Icons.add),
                          Padding(
                            padding: const EdgeInsets.all(5.0),
                            child: Container(
                              width: 50.0,
                              height: 50.0,
                              child: Center(child: Text('12')),
                              color: Colors.red[200],
                            ),
                          ),
                          Icon(Icons.remove),
                        ],
                      ),
                    ),
)