容器在flutter中不会到屏幕底部?

问题描述 投票:0回答:1

我在flutter布局上工作,我试图让最后一个容器完全像底部导航栏一样放置,在我的身体中使用列来设置部件,并在第二个最后部件是列表视图。

但我的最后一个容器底部有很多空间,如何解决这个问题。

class  _MyPersondataState extends State<Persondata> {

  double height;
  double width;
  final Color lightbluecolor = Color(0xFF3AB5FF);
  List<int> getListItems(){
    List<int> numberlist = List(10);
    numberlist[0] = 5700;
    numberlist[1] = 1200;
    numberlist[2] = 970;
    numberlist[3] = 1840;
    numberlist[4] = 2520;
    numberlist[5] = 5700;
    numberlist[6] = 6200;
    numberlist[7] = 4970;
    numberlist[8] = 6840;
    numberlist[9] = 7520;
    var items = numberlist;
    return items;
  }
  Widget getListView(){
    var listitems = getListItems();
    var listView = ListView.builder(
        itemCount: listitems.length,
        itemBuilder: (context, index){
          return ListTile(
            title: Text('Gross Salary'),
            trailing: Text(listitems[index].toString()),
          );
        }
    );
    return listView;
  }

  @override
  Widget build(BuildContext context) {
    width = MediaQuery.of(context).size.width;
    height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(''),
      ),
      body: Container(
        margin: EdgeInsets.only(left:15.0,right: 15.0),
        color: Colors.white,
        width: width,
        alignment: Alignment.bottomCenter,
        child: Column(
          children: <Widget>[

            Text(
                'What a loss carryforward is',
              textDirection: TextDirection.ltr,
              style: TextStyle(
                decoration: TextDecoration.none,
                fontSize: 16.0,
                fontFamily: 'Roboto',
                fontWeight: FontWeight.w700,
                color: Colors.black,

              ),
            ),
            SizedBox(height: 8),
            Flexible(
             child: new Text(
                'If your costs exceeded your salary, then you will have loss for this tax year.'
                    ' You can carry this loss.'
                    ' This will reduce next year’s tax\n\n. '
                    '*How do i do that?*\n\n'
                    ' In order to make use of this, you must send a tax return to office.'
                    ' You do not have to worry.'
                    ' You will then receive acknowledgement from the office.\n\n'
                     ,
                textDirection: TextDirection.ltr,
                style: TextStyle(
                  decoration: TextDecoration.none,
                  height: 1.2,
                  fontSize: 14.0,
                  fontFamily: 'Roboto',
                  fontWeight: FontWeight.w400,


                ),
              ),
            ),
            SizedBox(height: 20),
            Align(
              alignment: Alignment.centerLeft,
              child: Text(
                'Your Taxes in detail',
                textDirection: TextDirection.ltr,
                style: TextStyle(
                  decoration: TextDecoration.none,
                  fontSize: 16.0,
                  fontFamily: 'Roboto',
                  fontWeight: FontWeight.w700,
                  color: Colors.black,

                ),
              ),
            ),

            SizedBox(height: 20),
            Align(
             alignment: Alignment.centerLeft,
             child:  Text(
                'Your income',
                textDirection: TextDirection.ltr,
                style: TextStyle(
                  decoration: TextDecoration.none,
                  fontSize: 15.0,
                  fontFamily: 'Roboto',
                  fontWeight: FontWeight.w700,
                  color: Colors.black,

                ),
              ),
            ),
            SizedBox(height: 6,),
            Expanded(

              child: getListView(),),

             Align(

               alignment: FractionalOffset.bottomCenter,
              child: Container(

                 color:Colors.amber,

                 margin: EdgeInsets.only(left:2.0,right: 2.0,bottom: 1.0, top: 24.0),
                 child: new Row(

                   children: <Widget>[

                     Column(
                       children: <Widget>[
                         Text(
                           "REFUND :",
                           textDirection: TextDirection.ltr,
                           textAlign: TextAlign.left,
                           style: TextStyle(
                             decoration: TextDecoration.none,
                             fontSize: 15.0,
                             fontFamily: 'Roboto',
                             fontWeight: FontWeight.w700,
                             color: Colors.black,

                           ),

                         ),
                         Text(
                           "0,00"+"$",
                           textDirection: TextDirection.ltr,
                           textAlign: TextAlign.left,
                           style: TextStyle(
                             decoration: TextDecoration.none,
                             fontSize: 20.0,
                             fontFamily: 'Roboto',
                             fontWeight: FontWeight.w700,
                             color: Colors.black,
                           ),

                         ),
                       ],

                     ),


                     Spacer(),
                     MaterialButton(
                       shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(12.0) ),
                       height: 50,
                       onPressed: (){
                         //      Navigator.push(context, MaterialPageRoute(builder: (context)=>Persondata()));
                         print("cilcked");
                       },
                       child: Text(
                         "Submit",
                         style: TextStyle(
                           decoration: TextDecoration.none,
                           fontSize: 15.0,
                           fontFamily: 'Roboto',
                           fontWeight: FontWeight.w700,
                           color: Colors.white,

                         ),
                       ),
                       color: lightbluecolor ,
                     ),



                   ],
                 ),
               ),
             ),





          ],
        ),


      ),

      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

这是图片,这是shpwing的白色空间。reduce bottom white space

flutter dart flutter-layout
1个回答
1
投票

给予最后一个容器所需的高度,最后将listView包装成Expanded。

    Expanded(
        child: ListView(
          children: <Widget>[]
         ),
        ),

      child:  Containter(
    height: x,

), //last one
     ),

0
投票

通过将listview包裹在一个容器内,给它所需的高度,最后用Expanded包裹你的最后一个容器。下面是一个例子

 Container(
    height: x,
    child: ListView(
      children: <Widget>[]
     ),
    ),
 Expanded(
  child: Align(
  alignment: Alignment.bottomCenter, 
    child: Containter(), //last one
 ),
),
© www.soinside.com 2019 - 2024. All rights reserved.