如何将文字摆放整齐？

Question

我想在左上角放置文本，如何在此代码中显示？

。

感谢您的帮助！

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Home-page',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home:MyHomePage(title: 'home-page',),

    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);     
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int counter = 0;
  int f,e;
  int n=20;
  void _updateLabels(int init, int end, int u) {
    setState(() {
      f = init;
      e = end;
      n=0;
      n=e-f;
    });
  }
  @override
  Widget build(BuildContext context) { 
    return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(

        title: Text(widget.title),
      ),   
      body: Center(     
        child: Column(       
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

           DoubleCircularSlider(100, 0, 20,
          height: 260.0,
          width: 260.0,
          primarySectors: 6,
          secondarySectors: 24,
          baseColor: Color.fromRGBO(0, 0, 0, 0.2),
          handlerOutterRadius: 12.0,
          onSelectionChange:_updateLabels ,
          child: Center(
                child: Text('$n',
                    style: TextStyle(fontSize: 36.0, color: Colors.white))),
          ),
          ],
        ),
      ),   
    );
  }
}

Answer 1

1. 将Center小部件删除为Scaffold的子级，因为它将使所有内容居中，从而不允许将要对齐的文本放在左上角。
2. 从mainAxisAlignment: MainAxisAlignment.center中删除Column，因为此属性会将列的所有内容垂直对齐到中心。
3. 将“文本”窗口小部件添加为该列的第一个子项，并使用Text窗口小部件的style属性将其向左对齐
4. 用CircularIndicator小部件和Expanded小部件包装Center。

有关支架，请参见下面的代码段：

return Scaffold(
  backgroundColor: Colors.green,
  appBar: AppBar(
    title: Text("Text"),
  ),
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("Test", textAlign: TextAlign.left, style: TextStyle(color: Colors.white),),
      Expanded(
        child: Center(
          child: DoubleCircularSlider(
            100,
            0,
            20,
            height: 260.0,
            width: 260.0,
            primarySectors: 6,
            secondarySectors: 24,
            baseColor: Color.fromRGBO(0, 0, 0, 0.2),
            handlerOutterRadius: 12.0,
            onSelectionChange: _updateLabels,
            child: Center(
                child: Text('$n',
                    style: TextStyle(fontSize: 36.0, color: Colors.white))),
          ),
        ),
      ),
    ],
  ),
);