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

问题描述

我的颤振应用程序中有一个简单的布局：

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。

此外，我需要按比例（按高度）分割屏幕——为此，我将 Expanded 与 Flex 结合使用。

但是当键盘出现时我也需要滚动。如果我使用 SingleChildScrollView 它会出错。也许这不是最好的方法 - 我会很感激任何建议。

我已经使用了几个选项，但我得到了这个错误。如何解决这个问题？

标签： flutterdartflutter-layout

解决方案

您可以在第 1 步：使用LayoutBuilderwrapSingleChildScrollView和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'),
                        ),
                      ),
                    ],
                  ))
                ],
              ),
            ),
          );
        }));
  }
}

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

问题描述

解决方案

推荐阅读