Question

尝试垂直展开Expanded或Container以使其高度与Row小部件高度，这是我的代码

@override Widget build(BuildContext context) { return InkWell( onTap: ()=> onDepartClicked(), child: Container( padding: EdgeInsets.all(16), child: Card( child: Row( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Expanded( flex: 8, child: Padding( padding: EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text(department.name, overflow: TextOverflow.visible, style: TextStyle(fontSize: 20), ), Container( margin: EdgeInsets.only(top: 8), child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Image.asset("assets/images/feedback.png", width: 20, height: 20,), SizedBox(width: 4,), Text(department.phone), SizedBox(width: 16,), Image.asset("assets/images/feedback.png", width: 20, height: 20,), SizedBox(width: 4,), Text(department.type), ], ), ), Container(margin: EdgeInsets.symmetric(vertical: 8),child: Divider(height: 0.3, color: Colors.grey,)), Container( child: Text(department.description, maxLines: 3, style: TextStyle(fontSize: 13), ), ) ], ), ), ), Container( width: 40, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)) ), child: Column( mainAxisSize: MainAxisSize.max, children: <Widget>[ Image.asset("assets/images/feedback.png", width: 20, height: 20, fit: BoxFit.scaleDown, ), ], ), ), ], ), ), ), ); }

我想在上面的代码（Row的第二个子元素）中扩展此块：

Container( width: 40, decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)) ), child: Column( mainAxisSize: MainAxisSize.max, children: <Widget>[ Image.asset("assets/images/feedback.png", width: 20, height: 20, fit: BoxFit.scaleDown, ), ], ), ),

我想通过在父级中垂直扩展蓝色区域来实现此视图

Answer 1

将容器包装在具有height：double.infinity的SizedBox中，以使其占用所有可用空间，在您情况下为行的高度。

Expanded(
            child: SizedBox(
               height:double.infinity,
               child:Container(
                  decoration: BoxDecoration(
                     color: Colors.blue,
                     borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4))
                     ),
                  child: Image.asset("assets/images/feedback.png", width: 20, height: 20, fit: BoxFit.scaleDown,),
                  ),
              ),
          )

Answer 2

在进一步澄清问题后进行编辑：

下面的代码背后的想法就像This Image。

该行的左子级包含一列，该列有3个子级。

该列的第一个子项是标题，第二个子项是“电话行和类型”，最后一个子项是描述。

对于“电话”和“类型”，您可以使用ListTile，但是您应该将它们放在类似Flexible的地方，或者为它们定义大小。

我找到了Listview，并在其中放了10张卡片。

代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView.builder(
          padding: EdgeInsets.all(16.0),
          itemBuilder: (BuildContext context, int index) {
            return _card();
          },
          shrinkWrap: true,
          itemCount: 10,
        ),
      ),
    );
  }

  Widget _card() {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Flexible(
              fit: FlexFit.tight,
              flex: 5,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'UBIT',
                    overflow: TextOverflow.visible,
                    style: TextStyle(fontSize: 20),
                  ),
                  Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Icon(Icons.message),
                      SizedBox(width: 4),
                      Text('+09210000000'),
                      SizedBox(width: 16),
                      Icon(Icons.message),
                      SizedBox(width: 4),
                      Text('Science'),
                    ],
                  ),
                  Divider(),
                  Text(
                    'Lorem Ipsum ist ein einfacher Demo-Text für ' +
                        'die Print- und Schriftindustrie. Lorem Ipsum ' +
                        'ist in der Industrie bereits der Standard Demo-Text' +
                        ' seit 1500',
                    textAlign: TextAlign.justify,
                  ),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 8.0),
              child: Icon(
                Icons.message,
                size: 30.0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

如何在Flutter中垂直扩展容器小部件

2 个答案: