flutter - 如何在带有滚动的列中使用FractionallySizedBox？

Question

我的flutter应用程序中有一个简单的布局:

Scaffold(
  resizeToAvoidBottomInset: true,
  appBar: AppBar(centerTitle: true, title: Text('test')),
  body: SingleChildScrollView(
    child: Column(
      children: [
        Expanded(
          flex: 7,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              FractionallySizedBox(
                widthFactor: 0.55,
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: TextField(),
                ),
              ),
              SizedBox(
                height: 15,
              ),
            ],
          ),
        ),
        Expanded(
            child: Column(
          children: [
            Text('some text'),
            FractionallySizedBox(
              widthFactor: 0.55,
              child: RaisedButton(
                child: Text('Hello'),
              ),
            ),
          ],
        ))
      ],
    ),
  ),
);

它有效，但没有SingleChildScrollView。与SingleChildScrollView我有错误:

RenderBox was not laid out: RenderRepaintBoundary#0b8c5 relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'

我需要字段和按钮占用相同的宽度-为此，我使用FractionallySizedBox。
另外，我需要按比例(在高度上)分割屏幕-为此，我使用了Flex扩展版。
但是，当键盘出现时，我也需要滚动。如果我使用SingleChildScrollView，则会出现错误。也许这不是最好的方法-我将不胜感激。
我使用了几个选项，但出现此错误。如何解决？

Answer 1

您可以在下面复制粘贴运行完整代码
第1步:使用LayoutBuilder包装SingleChildScrollView和ConstrainedBox步骤2:RaisedButton使用Expanded您可以在下面查看工作演示
程式码片段

body: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: constraints.copyWith(
                maxHeight: constraints.maxHeight,
              ),
              child: Column(
              
  ...
  Expanded(
        flex: 3,
        child: RaisedButton(
          onPressed: () {
            print("hi");              

工作演示

完整的代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //resizeToAvoidBottomInset: true,
        appBar: AppBar(centerTitle: true, title: Text('test')),
        body: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: constraints.copyWith(
                maxHeight: constraints.maxHeight,
              ),
              child: Column(
                children: [
                  Expanded(
                    flex: 7,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        FractionallySizedBox(
                          widthFactor: 0.55,
                          child: Padding(
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            child: TextField(),
                          ),
                        ),
                        SizedBox(
                          height: 15,
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                      child: Column(
                    children: [
                      Text('some text'),
                      Expanded(
                        flex: 3,
                        child: RaisedButton(
                          onPressed: () {
                            print("hi");
                          },
                          child: Text('Hello'),
                        ),
                      ),
                    ],
                  ))
                ],
              ),
            ),
          );
        }));
  }
}