android - Flutter：无论平台（android，iOS），统一的容器大小

Question

页面结构示例：

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              flex: 3,
              child: Padding(
                padding: const EdgeInsets.fromLTRB(8, 8, 8, 2),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    _block1(),
                    _block2(),
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 2,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
                child: _block3(),
              )
            ),
            Expanded(
              flex: 3,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
                child: _block4(),
              )
            ),
            Expanded(
              flex: 2,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
                child: _block5(),
              )
            ),
          ],
        ),
      ),
    );
  }

要加载的小容器小部件之一的示例

  Widget _block1() {
    return Expanded(
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey, width: 2),
          borderRadius: BorderRadius.circular(0.0),
        ),
        margin: EdgeInsets.all(4.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'headline',
              textAlign: TextAlign.start,
              style: TextStyle(
                  fontSize: 24,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: 12,
            ),
            Text(
              'text',
              textAlign: TextAlign.start,
              style: TextStyle(fontSize: 20, color: Colors.black),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              'text',
              textAlign: TextAlign.start,
              style: TextStyle(fontSize: 20, color: Colors.black),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              'text',
              textAlign: TextAlign.start,
              style: TextStyle(fontSize: 20, color: Colors.black),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              'text',
              textAlign: TextAlign.start,
              style: TextStyle(fontSize: 20, color: Colors.black),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              'text',
              textAlign: TextAlign.start,
              style: TextStyle(fontSize: 20, color: Colors.black),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              'text',
              textAlign: TextAlign.start,
              style: TextStyle(fontSize: 20, color: Colors.black),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              'text',
              textAlign: TextAlign.start,
              style: TextStyle(fontSize: 20, color: Colors.black),
            ),
            SizedBox(
              height: 4,
            ),
            Text(
              'text',
              textAlign: TextAlign.start,
              style: TextStyle(fontSize: 20, color: Colors.black),
            ),
          ],
        ),
      ),
    );
  }

大型容器之一的示例：

  Widget _block3() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey, width: 2),
        borderRadius: BorderRadius.circular(0.0),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
        Text(
        'another container for displaying different contents',
        textAlign: TextAlign.start,
        style: TextStyle(fontSize: 20, color: Colors.black),),
      ])
    );
  }

Android 平板电脑 Nexus 10

但在 iOS iPad 上我得到溢出错误

iOS iPad 第 8 代

有没有办法调整容器的高度和宽度，使它们在 Android 和 iOS 上看起来一样，并且在没有“SingleChildScrollView”的帮助下不会导致溢出错误？

标签： androidiosflutterflutter-layout

Answer 1

Wrap each text in the _bloc1 widget with Expanded and remove the SizeBox widgets. Example, for the individual fixed SizedBox heights in your _block1 widget, they will eventually add up and cause overflow error when the total size becomes larger than available space. Also note that if your widgets are too many, things will still overflow.

Another possible solution is using FittedBox to resize your texts or contents based on available width and height.