快捷導(dǎo)航

flutter Container容器實(shí)現(xiàn)圓角邊框

更新時(shí)間：2019年07月17日 11:05:17 作者：早起的年輕人

這篇文章主要為大家詳細(xì)介紹了flutter Container容器實(shí)現(xiàn)圓角邊框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了flutter Container容器實(shí)現(xiàn)圓角邊框的具體代碼，供大家參考，具體內(nèi)容如下

在這里使用 Container 容器來實(shí)現(xiàn)圓角矩形邊框效果

1 圓角矩形邊框

Container(
margin: EdgeInsets.only(left: 40, top: 40),
//設(shè)置 child 居中
alignment: Alignment(0, 0),
 height: 50,
width: 300,
//邊框設(shè)置
decoration: new BoxDecoration(
//背景
 color: Colors.white,
 //設(shè)置四周圓角 角度
 borderRadius: BorderRadius.all(Radius.circular(4.0)),
 //設(shè)置四周邊框
border: new Border.all(width: 1, color: Colors.red),
),
child: Text("Container 的圓角邊框"),
 ),

2 圓角矩形邊框

Container(
margin: EdgeInsets.only(left: 40, top: 40),
//設(shè)置 child 居中
alignment: Alignment(0, 0),
height: 50,
width: 300,
//邊框設(shè)置
decoration: new BoxDecoration(
//背景
color: Colors.white,
 //設(shè)置四周圓角 角度 這里的角度應(yīng)該為 父Container height 的一半
 borderRadius: BorderRadius.all(Radius.circular(25.0)),
 //設(shè)置四周邊框
border: new Border.all(width: 1, color: Colors.red),
 ),
 child: Text("Container 的圓角邊框"),
 ),

3 可點(diǎn)擊的圓角矩形邊框

使用 InkWell 來實(shí)現(xiàn) ，更多關(guān)于 InkWell 可查看 flutter InkWell 設(shè)置水波紋點(diǎn)擊效果詳述

Container(
 margin: EdgeInsets.only(left: 40, top: 40),
   child: new Material(
   //INK可以實(shí)現(xiàn)裝飾容器
   child: new Ink(
    //用ink圓角矩形
    // color: Colors.red,
    decoration: new BoxDecoration(
    //背景
    color: Colors.white,
    //設(shè)置四周圓角 角度
    borderRadius: BorderRadius.all(Radius.circular(25.0)),
    //設(shè)置四周邊框
    border: new Border.all(width: 1, color: Colors.red),
    ),
    child: new InkWell(
     //圓角設(shè)置,給水波紋也設(shè)置同樣的圓角
     //如果這里不設(shè)置就會出現(xiàn)矩形的水波紋效果
     borderRadius: new BorderRadius.circular(25.0),
     //設(shè)置點(diǎn)擊事件回調(diào)
     onTap: () {},
     child: Container(
     //設(shè)置 child 居中
     alignment: Alignment(0, 0),
     height: 50,
     width: 300,
     child: Text("點(diǎn)擊 Container 圓角邊框"),
     )),
   ),
   ),
  ),

4 可點(diǎn)擊的圓角矩形邊框

Container(
  margin: EdgeInsets.only(left: 40, top: 40),
   child: new Material(
   child: new Ink(
    //設(shè)置背景
    decoration: new BoxDecoration(
    //背景
    color: Colors.white,
    //設(shè)置四周圓角 角度
    borderRadius: BorderRadius.all(Radius.circular(25.0)),
    //設(shè)置四周邊框
    border: new Border.all(width: 1, color: Colors.red),
    ),
    child: new InkResponse(
    borderRadius: new BorderRadius.all(new Radius.circular(25.0)),
    //點(diǎn)擊或者toch控件高亮?xí)r顯示的控件在控件上層,水波紋下層
//    highlightColor: Colors.deepPurple,
    //點(diǎn)擊或者toch控件高亮的shape形狀
    highlightShape: BoxShape.rectangle,
    //.InkResponse內(nèi)部的radius這個(gè)需要注意的是，我們需要半徑大于控件的寬，如果radius過小，顯示的水波紋就是一個(gè)很小的圓，
    //水波紋的半徑
    radius: 300.0,
    //水波紋的顏色
    splashColor: Colors.yellow,
    //true表示要剪裁水波紋響應(yīng)的界面 false不剪裁 如果控件是圓角不剪裁的話水波紋是矩形
    containedInkWell: true,
    //點(diǎn)擊事件
    onTap: () {
     print("click");
    },
    child: Container(
     //設(shè)置 child 居中
     alignment: Alignment(0, 0),
     height: 50,
     width: 300,
     child: Text("點(diǎn)擊 Container 圓角邊框"),
    ),
    ),
   ),
   ),
  ),

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: