banner
RustyNail

RustyNail

coder. 【blog】https://rustynail.me 【nostr】wss://ts.relays.world/ wss://relays.world/nostr

在Flutter中,row和col

flutter 的 col 和 row 用起來和 bootstrap 差不多

直接一個 new Row(childen:..); 就行了,
裡邊放什麼都行。。。

有個要注意的是,假如放了太多東西進去,而不用 listview 包著的話,會因為溢出屏幕而報錯。

demo code

import 'package:flutter/material.dart';

class AppBar extends StatelessWidget{
  @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return new Container(
        // margin: const EdgeInsets.fromLTRB(0.0, 24.0, 0.0, 0.0),
        color: Colors.purple.shade300,
        child: new Row(
          children: <Widget>[
            new IconButton(
              icon: new Icon(Icons.menu),
              tooltip: 'menu',
              onPressed: null,
            ),
            new Expanded(
              child: new Text('標題'),
            ),
            new IconButton(
              icon: new Icon(Icons.search),
              tooltip: 'search',
              onPressed: null,
            )
          ],
        ),
      );
    }
}

class PageContent extends StatelessWidget{
  const PageContent({this.color});
  final Color color;
    @override
      Widget build(BuildContext context) {
        // 
        return new Material(
          child: new Column(
            children: <Widget>[
              new Row(
                children: <Widget>[
                  new Expanded(
                    child: new Container(
                      height: 50.0,
                      color: Colors.orange,
                      child: new Text('測試'),
                    )
                  ),
                  new Expanded(
                    child: new Container(
                      height: 50.0,
                      color: Colors.blue,
                      child: new Text('測試'),
                    )
                  ),
                  new Expanded(
                    child: new Container(
                      height: 50.0,
                      color: Colors.teal,
                      child: new Text('測試'),
                    )
                  ),
                ],
              ),
              new Image.network('https://i0.hdslb.com/bfs/archive/36f639d8cedc57840aff48361a7a1e8389040077.jpg'),
                new Image.network('https://i0.hdslb.com/bfs/archive/36f639d8cedc57840aff48361a7a1e8389040077.jpg'),
                new Container(
                  margin: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
                  child: new Text('VioletEverGarden',
                    style: new TextStyle(
                      color: color,
                      fontSize: 36.0
                  )
                ),
              )
            ],
          )
        );
      }
}


class HomePage extends StatelessWidget{
  const HomePage({this.color});
  final Color color;
  @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return new Material(
        child: new Column(
          children: <Widget>[
            new Container(
              color: this.color,
              height: 24.0,
            ),
            new AppBar(),
            new PageContent(color: color,)
          ],
        ),
      );
    }
}
void main()=>runApp(new MaterialApp(
  title: 'title',
  home: new HomePage(color:const Color.fromRGBO(138,43,226, 1.0)),
));
載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。