首页 > 解决方案 > 如何在颤动中制作可滚动的框?

问题描述

我有一个Card小部件,它看起来像:

在此处输入图像描述

但是当其中的数字变大时,它会Card像这样溢出:

在此处输入图像描述

我试图将文本框包装在 a 中SizedBox并给它一个高度。然后,将它包裹在 aSingleChildScrollView但它没有帮助。我应该如何解决这个问题?

以下是代码:

Card(
 child: Container(
  padding: const EdgeInsets.all(8.0),
  width: 300,
  height: 250,
  child: Column(
    children: <Widget>[
      const Text('Output', style: TextStyle(fontSize: 25)),
      const SizedBox(height: 10),
      getOutputRow('Answer'),
    ],
  ),
),

辅助方法:

  Text styledText(String data) {
    return Text(data, style: TextStyle(fontSize: 20));
  }

  Widget getOutputBox() {
    final themeData = Theme.of(context);
    final output = result == null ? '' : result.toString();

    return Container(
      width: 150,
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(border: Border.all(width: 1, color: themeData.primaryColor)),
      child: Text(output, style: TextStyle(fontSize: 16), textAlign: TextAlign.center),
    );
  }

  Row getOutputRow(String data) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        styledText(data),
        styledText('='),
        getOutputBox(),
      ],
    );
  }

标签: flutter

解决方案


这将有助于

Expanded(
  child:SingleChildScrollView(
     child : getOutputRow('Answer')
  )
)

推荐阅读