首页 > 解决方案 > 我希望第二个小部件(容器)向左对齐,但它与中心对齐。如何将它与其他小部件对齐?

问题描述

我想将注释为“//添加学生按钮”的容器对齐到左侧,但它对齐到中心。我也尝试过使用 insted 凸起按钮,但在这种情况下,它会延伸到完整的父容器长度,但我只希望它剪辑到按钮内容。

import 'package:educewebsite/SizeConfig.dart';
import 'package:flutter/material.dart';

class StudentsScreen extends StatefulWidget {
  @override
  _StudentsScreenState createState() => _StudentsScreenState();
}

class _StudentsScreenState extends State<StudentsScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: SizeConfig.blockSizeVertical * 90,
      width: SizeConfig.blockSizeHorizontal * 80,
      margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 2),
      child:
          Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
        // top title
        ListTile(
            leading: Icon(
              Icons.people,
              size: 40,
            ),
            title: Text(
              'Students',
              style: TextStyle(fontSize: 22),
            )),
        // add new student button
        Container(
          alignment: Alignment.center,
          height: SizeConfig.blockSizeVertical * 8,
          width: SizeConfig.blockSizeHorizontal * 15,
          decoration: BoxDecoration(
              color: Colors.blue, borderRadius: BorderRadius.circular(10)),
          child: ListTile(
              leading: Icon(Icons.person_add, color: Colors.white, size: 35),
              title: Text(
                'Add Student',
                style: TextStyle(color: Colors.white, fontSize: 20),
              )),
        ),
        //search student form
        Container(
          child: Text('this is here'),
          margin: EdgeInsets.symmetric(
              vertical: SizeConfig.blockSizeVertical * 2.5,
              horizontal: SizeConfig.blockSizeHorizontal * 1),
          height: SizeConfig.blockSizeVertical * 65,
          width: SizeConfig.blockSizeHorizontal * 80,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(width: 1, color: Colors.black12),
              borderRadius: BorderRadius.circular(10)),
        )
      ]),
    );
  }
}

标签: androidflutterdart

解决方案


将“添加学生按钮”容器包装在 Align Widget 中。前任:-

Align(
            alignment: Alignment.centerLeft,
            child: Container() // Add Student Button Container,
          ),

推荐阅读