颤振中的可滚动列

时间:2020-02-10 11:17:25

标签: flutter flutter-layout

enter image description here我想使屏幕可滚动,但这没有发生。我正在制作一个想要显示图像,标题和描述的应用程序。我已经成功显示了数据,但现在想使屏幕可滚动。我也想添加一个应用程序栏,但是两个应用程序栏出现在另一个下方。

这是我的代码:

import 'dart:convert';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:http/http.dart' as http;
import 'package:kmitra/app_screens/fragment_topheadlines.dart';

import 'News.dart';

class Newsdetail extends StatefulWidget {
  final String value_image, value_description, value_title;

  /*String value_image,value_description;
 int index;*/

  Newsdetail(
      {Key key,
      @required this.value_image,
      this.value_description,
      this.value_title})
      : super(key: key);

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

class _newsdetail extends State<Newsdetail> {
  _newsdetail();

  // List<News> dataList = List();
  bool _isLoading = false;
  BuildContext context1;

  Future loadyourData() async {
    setState(() {
      _isLoading = true;
    });

    @override
    void initState() {
      super.initState();

      loadyourData();
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: SingleChildScrollView(
          child: Container(
              child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Expanded(
                child: Image.network(
              widget.value_image, //image
            )),
            Padding(
              padding: const EdgeInsets.fromLTRB(6.0, 8.0, 0, 8.0),
              child: Text(
                widget.value_title, //title
                style: TextStyle(fontSize: 25.0),
              ),
            ),
            Expanded(
                child: Text(
              widget.value_description, //descrpition
              style: TextStyle(fontSize: 18.0),
            )),
          ],
        ),
      ))),
    );
  }
}

4 个答案:

答案 0 :(得分:1)

我通过使用列小部件内的行然后使用SinglechildScrollView找到了解决方案。

答案 1 :(得分:0)

使用SingleChildScrollView

   @override
          Widget build(BuildContext context) {

            return Scaffold(
              body: SingleChildScrollView(
                   child: Container(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                children: <Widget>[
                    Expanded(
                        child: Image.network(
                      widget.value_image,              //image

                    )),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(6.0, 8.0, 0, 8.0),
                      child: Text(
                        widget.value_title,             //title
                        style: TextStyle(fontSize: 25.0),
                      ),
                    ),
                    Expanded(
                        child: Text(
                      widget.value_description,       //descrpition
                      style: TextStyle(fontSize: 18.0),
                    )),
                ],
              ),
                  ))),
            );
          }
        }

与注释中一样,而不是滚动体上使用

SingleChildScrollView(
                        child: Text(
                      widget.value_description,       //descrpition
                      style: TextStyle(fontSize: 18.0),
                    )),

OR

Flexible(
                        child: Text(
                      widget.value_description,       //descrpition
                      style: TextStyle(fontSize: 18.0),
                    )),

答案 2 :(得分:0)

您可以在中使用Listview或SingleChildScrollView作为可滚动视图 身体

ListView(
      shrinkWrap: true,
      padding: EdgeInsets.all(15.0),
      children: <Widget>[
        //Your Column Childrens
      ]
    )

答案 3 :(得分:0)

SingleChildScrollView小部件中使用Container

Container(
  child:  SingleChildScrollView(
    child:  Column(
      children: <Widget>[
        _showChild1(),
       other child widgets
        ...
      ]
    )
  )
);