Flutter開發(fā)中問題總結(jié)

小白直接手?jǐn)]項(xiàng)目偶宫，遇到一些問題記錄下來

1. 在Center中添加Column不起作用

Column需要添加MainAxisAlignment屬性

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [],
        ),
      ),

2. 如何設(shè)置顏色

eg:Color(0xFF0099ff)

• 0x為固定
• FF代表透明度（16進(jìn)制）
• 0099ff代表RGB色值

3. 如何顯示/隱藏控件

• Visibility()控件中的visible屬性可以實(shí)現(xiàn)控件的顯示或隱藏

  • isShow為bool型定续，可以通過其他條件進(jìn)行設(shè)定

  Visibility(
    child: Text('可見與不可見'),
    visible: isShow,
  ),
  

• 也可以在控件內(nèi)通過ifelse條件實(shí)現(xiàn)控件的顯示或隱藏

  Column(
    children: <Widget>[
       if (isShow) Text("根據(jù)show值顯示或隱藏"),
       Text("始終顯示"),
     ],
  )
  

4. 無法加載圖片資源 Flutter Unable to load asset

報(bào)錯(cuò)信息：Another exception was thrown: Unable to load asset: ‘"........"

• 在項(xiàng)目pubspec.yaml文件里批钠，flutter節(jié)點(diǎn)下淤井，assets屬性內(nèi)添加資源地址

    assets:
      - assets/img/
      - assets/img/home_tab/
  

5.Container 實(shí)現(xiàn)圓角

使用 borderRadius實(shí)現(xiàn)圓角

Container(
    decoration: BoxDecoration(
        color: Color(0xffF7F7F7),
        borderRadius:
            BorderRadius.all(Radius.circular(15))),
),

6.showModalBottomSheet 實(shí)現(xiàn)頂部圓角

使用 backgroundColor: Colors.transparent設(shè)置背景為透明

showModalBottomSheet(
    backgroundColor: Colors.transparent,
    isScrollControlled: true,
    context: context,
    builder: (context) {
       return Container(
          decoration: BoxDecoration(
               color: Colors.white,
               borderRadius: BorderRadius.only(
                   topLeft: Radius.circular(30),
                   topRight: Radius.circular(30))),
        );
  });

7.控制臺(tái)報(bào)錯(cuò) Incorrect use of ParentDataWidget

導(dǎo)致原因：
Expanded悉默、Flexible只能在Row间螟、Column組件內(nèi)纤垂，不能在其他組件內(nèi)使用

8.MaterialButton設(shè)置寬度

• 設(shè)置 Container 的 padding屬性
• 設(shè)置 MaterialButton 的 minWidth 屬性為 double.infinity

Container(
    padding: EdgeInsets.only(left: 16, right: 16),
    alignment: Alignment.center,
    child: MaterialButton(
        minWidth: double.infinity,
        height: 44,
        color: Color(0xffFFE733),
        child: Text(
            '確定',
            style: TextStyle(fontWeight: FontWeight.bold),
        ),
       shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(22)),
       onPressed: () {
           Navigator.pop(context);
       },
    ),
)

9. TextField更改選中時(shí)的圖標(biāo)顏色

設(shè)置 Theme 的顏色

return MaterialApp(
      theme: ThemeData(
        colorScheme:
            ThemeData().colorScheme.copyWith(primary: Color(0xff999999)),
      ),
);

10.背景模糊化 ImageFilter.blur

sigmaX 和 sigmaY 分別設(shè)置了x和y方向的模糊程度

BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 9, sigmaY: 9),
    child: Container(
        color: Colors.white.withOpacity(0.5),
        height: 1000,
     ),
),