美文网首页
Flutter ③《线性布局-Row》

Flutter ③《线性布局-Row》

作者: 泅渡者 | 来源:发表于2019-07-19 16:43 被阅读0次
    Row

    一个可以水平方向展示组件集合的组件,该组件的属性几乎和上一篇是一样的,我们直接看下用法。

    import 'package:flutter/material.dart';
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: '第一个程序',
          home: Scaffold(
              appBar: AppBar(
                title: Text("第一个程序"),
              ),
              body: Row(
                children: <Widget>[
                  Expanded(
                    child: Text('你 过来啊!', textAlign: TextAlign.center),
                  ),
                  Expanded(
                    child: Text('不 我就在这', textAlign: TextAlign.center),
                  ),
                  Expanded(
                    child: FittedBox(
                      fit: BoxFit.contain, // otherwise the logo will be tiny
                      child: const FlutterLogo(),
                    ),
                  ),
                ],
              )),
        );
      }
    }
    

    效果如下


    图片.png
    import 'package:flutter/material.dart';
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: '第一个程序',
          home: Scaffold(
              appBar: AppBar(
                title: Text("第一个程序"),
              ),
              body: Row(
                children: <Widget>[
                  const FlutterLogo(),
                  const Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
                  const Icon(Icons.sentiment_very_satisfied),
                ],
              )),
        );
      }
    }
    
    图片.png

    再看看这个例子,如果Row的子组件不用Expanded或者Flexible组件可能会报错。
    如果仅仅有一个子组件可以用Align或者Center来定位
    Flutter会提示“OVERFLOWED” 表示你的布局超出屏幕,主要是由于没有添加限定导致的

    我们修改一下Row

     Row(
                children: <Widget>[
                  const FlutterLogo(),
                  const Expanded(
                    child: Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
                  ),
                  const Icon(Icons.sentiment_very_satisfied),
                ],
              )
    

    运行结果如下:


    图片.png

    相关文章

      网友评论

          本文标题:Flutter ③《线性布局-Row》

          本文链接:https://www.haomeiwen.com/subject/onhslctx.html