包含AspectRatio窗口小部件时,Flutter Table无法正确调整大小

时间:2019-09-06 17:44:21

标签: flutter flutter-layout

我有一个由Table个小部件组成的AspectRatio。 这个Table位于Column中,里面有另一个小部件,例如Text。 然后,我使用Table小部件及其Text参数在Expandedflex之间分配空间。 Table始终会填满屏幕宽度,即使它没有足够的垂直空间,因此也会被Column中的第二个小部件剪裁。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Material App Bar'),
          ),
          body: MyHomePage()),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          flex: 1, 
          child: MyTable()
        ),
        Expanded(
          flex: 2,
          child: Container(
            color: Colors.green,
          ),
        )
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    var cell = AspectRatio(
    aspectRatio: 1.0,
    child: Container(),
    );
    var row = TableRow(children: [
      cell,
      cell,
      cell,
    ]);

    return Table(
      border: TableBorder.all(width: 4),
      children: [
        row,
        row,
        row,
      ],
    );
  }
}

查看结果“ https://imgur.com/a/rxx5IcN

0 个答案:

没有答案