2022年4月17日

flutter基础教程(row布局)

作者 admin


分享几个学习flutter的学习网站与资源

flutter实战第二版https://book.flutterchina.club/chapter6/gridview.html#_6-6-1-%E9%BB%98%E8%AE%A4%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0

flutter中文文档https://flutter.cn/docs/get-started/flutter-for/web-devs

main_row_no.dart

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',

        home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向布局'),
          ),
          body:new Row(
            children: <Widget>[
              new RaisedButton(
                onPressed: (){

                },
                color:Colors.redAccent,
                child:new Text('红色按钮')
              ),
              new RaisedButton(
                onPressed: (){

                },
                color:Colors.orangeAccent,
                child: new Text('黄色按钮'),
              ),  
              new RaisedButton(
                onPressed: (){

                },
                color:Colors.pinkAccent,
                child:new Text('粉色按钮')
              )
            ],
          )
        ),
      );
  }
}

main_row_Mix_expanded.dart

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',

        home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向布局'),
          ),
          body:new Row(
            children: <Widget>[
             new RaisedButton(
                onPressed: (){

                },
                color:Colors.redAccent,
                child:new Text('红色按钮')
            ),
            Expanded(child:new RaisedButton(
                onPressed: (){

                  },
                  color:Colors.orangeAccent,
                  child: new Text('黄色按钮'),
                )

              ),
            new RaisedButton(
                onPressed: (){
                },
                color:Colors.pinkAccent,
                child:new Text('粉色按钮')
              )
            ],
          )
        ),
      );
  }
}

main_row_expanded.dart

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',

        home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向布局'),
          ),
          body:new Row(
            children: <Widget>[
              Expanded(child:new RaisedButton(
                onPressed: (){         
                },
                color:Colors.redAccent,
                child:new Text('红色按钮')
              )),
              Expanded(child:new RaisedButton(
                onPressed: (){
                  },
                  color:Colors.orangeAccent,
                  child: new Text('黄色按钮'),
                )

              ),
              Expanded(child:new RaisedButton(
                onPressed: (){
                },
                color:Colors.pinkAccent,
                child:new Text('粉色按钮')
              )             
              )
            ],
          )
        ),
      );
  }
}