展开或灵活添加白色底部

Question

更新
添加了最少的代码
我想在滚动视图中显示长文本。
最多红线文本可滚动

我试过了：
使用灵活的 :: 相同的结果
在容器中包装 :: 它使文本全屏且不可滚动

代码

  new Expanded(
          child: new SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Text(
             'Very Long text',
                style: TextStyle(color: Colors.black, fontSize: 24),
              )),
        ),

如果我尝试增加 flex 属性它开始与上部小部件重叠

谢谢
完整代码

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        backgroundColor: 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) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Color(0xff010409),
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: TextField(
          // controller: _uri,
          decoration: InputDecoration(
              hintText: 'Search', prefixIcon: Icon(Icons.search)),
        ),
        actions: <Widget>[
          FlatButton(
            textColor: Colors.white,
            onPressed: () {
            
            },
            child: Icon(Icons.search),
            shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
          ),
        ],
      ),
      body: SafeArea(
          child: Column(children: <Widget>[

        Flexible(
            child: Text(
        'abc',
          style: TextStyle(
              color: Color(0xff58a6ff), fontWeight: FontWeight.bold, fontSize: 30),
        )),
        new Expanded(
          flex:2,
          child: new SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Text(
            'Big String',
                style: TextStyle(color: Colors.white, fontSize: 24),
              )),
        ),
      ])),
    );
  }
}

Answer 1

用 Column 包装 Text 小部件对我来说很有效，就像这样：

...
SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.center,
    children <Widget> [
      Text('Very Long text',
        style: TextStyle(color: Colors.black, fontSize: 24),
      ),
    ]
)
...

我不确定你是否需要 SingleChildScrollView

上面的 Expanded

Answer 2

这段代码对我来说很好用

更新：

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) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Color(0xff010409),
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: TextField(
          // controller: _uri,
          decoration: InputDecoration(
              hintText: 'Search', prefixIcon: Icon(Icons.search)),
        ),
        actions: <Widget>[
          FlatButton(
            textColor: Colors.white,
            onPressed: () {},
            child: Icon(Icons.search),
            shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
          ),
        ],
      ),
      body: SafeArea(
          child: Column(children: <Widget>[
        //Removed Flexible Widget
        Text(
          'abc',
          style: TextStyle(
              color: Color(0xff58a6ff),
              fontWeight: FontWeight.bold,
              fontSize: 30),
        ),
        new Expanded(
          // flex: 2,  //commented flex here for taking the whole available space.
          child: new SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Text(
                """A Long Long String Here...""",
                style: TextStyle(color: Colors.white, fontSize: 24),
              )),
        ),
      ])),
    );
  }
}

在上面的代码中，将 A very Long long String 替换为您的 long Text

正如@AK-23 指出的那样，您确定需要 SingleChildScrollView 上方的 Expanded 小部件吗？

如果是，请粘贴您的完整代码，以便我们找出问题所在。

已编辑：

我已经从 text 中删除了 Flexible 小部件，commented Expanded 小部件的 flex 小部件，以及 code 开始工作.

展开或灵活添加白色底部

Expand or Flexible add white bottom

widget

dart

flutter