Flutter中Row中的子控件左右两端对齐

2021-08-02 10:32:56 浏览数 (1)

Flutter中Row中的子控件左右两端对齐

代码语言:javascript复制
Container(
          // padding: EdgeInsets.only(left: 20, right: 20),
          margin: EdgeInsets.only(top: 20, left: 20, right: 20),
          width: 500,
          height: 500,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5), color: Colors.blue),
          child: Column(
            children: [
              //第一种 利用expanded
              Container(
                color: Color(0xFFF6F6F6),
                height: 50,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("名称"),
                    Expanded(
                      child: Container(
                          alignment: Alignment.topRight,
                          child: Text("Expanded")),
                    )
                  ],
                ),
              ),
              //第二种用 row 的熟悉属性
              Container(
                 color: Color(0xFFF6F6F6),
                height: 50,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    new Text("名称"),
                    new Text("spaceBetween"),
                  ],
                ),
              ),
              //第三种 spacer
              Container(
                child: new Row(
                  children: [
                    new Text("名称"),
                    Spacer(),
                    new Text("Spacer"),
                  ],
                ),
              ),
              // //第四种 Flexible
              Container(
                child: new Row(
                  children: [
                    new Text("名称"),
                    Flexible(fit: FlexFit.tight, child: SizedBox()),
                    new Text("Flexible"),
                  ],
                ),
              ),
            ],
          ),
        )

0 人点赞