如何将小部件填充到完整的可用行高

html5 • • 问答 • 193 阅读

布局如下所示：

这是一个Row，它在里面ListView。里面有一个Column带Text小部件、前导和尾随小部件。问题是前导小部件必须填充Row. 该Row高度由所确定的Column与所述Text窗口小部件，和前端小部件应调整到这个大小，而不是试图增加Row高度为无穷大（例如，领先的插件可以是着色的Container具有无限的高度和给定的宽度）。是否有可能做到这一点？

回答

使用crossAxisAlignment: CrossAxisAlignment.stretch填充height的Row（width的Column），即沿CrossAxis舒展。

使用Expandedwidgets 沿着MainAxis 填充空间 flex 属性将决定每个widget 的比例。

对于尾随小部件，只需使用Center小部件将其居中即可。

为了让你的Rowinside aListView伸展到最高孩子的高度，在Row里面放一个IntrinsicHeight小部件。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Row and Column',
      home: Scaffold(
        body: ListView(
          children: [
            IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Expanded(child: MyWidget()),
                  Expanded(
                    flex: 3,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        MyTextWidget(
                          text:
                              'I like to believe that science is becoming mainstream.',
                        ),
                        MyTextWidget(
                          text:
                              'There is no known objects accounting for most of the effective gravity in the universe.',
                        ),
                        MyTextWidget(
                          text: "Let's explore because it's fun.",
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Center(
                      child: SizedBox(height: 40.0, child: MyWidget()),
                    ),
                  ),
                ],
              ),
            ),
            Spacer(),
          ],
        ),
      ),
    ),
  );
}

class MyTextWidget extends StatelessWidget {
  final String text;

  const MyTextWidget({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        padding: const EdgeInsets.all(4.0),
        color: Colors.blueGrey,
        child: Text(text),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(color: Colors.blueGrey),
    );
  }
}
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Row and Column',
      home: Scaffold(
        body: ListView(
          children: [
            IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Expanded(child: MyWidget()),
                  Expanded(
                    flex: 3,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        MyTextWidget(
                          text:
                              'I like to believe that science is becoming mainstream.',
                        ),
                        MyTextWidget(
                          text:
                              'There is no known objects accounting for most of the effective gravity in the universe.',
                        ),
                        MyTextWidget(
                          text: "Let's explore because it's fun.",
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Center(
                      child: SizedBox(height: 40.0, child: MyWidget()),
                    ),
                  ),
                ],
              ),
            ),
            Spacer(),
          ],
        ),
      ),
    ),
  );
}

class MyTextWidget extends StatelessWidget {
  final String text;

  const MyTextWidget({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        padding: const EdgeInsets.all(4.0),
        color: Colors.blueGrey,
        child: Text(text),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(color: Colors.blueGrey),
    );
  }
}

以上是如何将小部件填充到完整的可用行高的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>